docs(cdk): add minimal autosize textarea example

Author: hadt0786

src/cdk/text-field/text-field.md

@@ -7,10 +7,16 @@ The `cdkTextareaAutosize` directive can be applied to any `<textarea>` to make i
 resize to fit its content. The minimum and maximum number of rows to expand to can be set via the
 `cdkAutosizeMinRows` and `cdkAutosizeMaxRows` properties respectively.
 
+For a textarea that only needs to resize as its content changes, no programmatic resize logic is
+required.
+
+<!-- example(text-field-autosize-textarea-basic) -->
+
 The resize logic can be triggered programmatically by calling `resizeToFitContent`. This method
 takes an optional boolean parameter `force` that defaults to `false`. Passing true will force the
 `<textarea>` to resize even if its text content has not changed, this can be useful if the styles
-affecting the `<textarea>` have changed.
+affecting the `<textarea>` have changed. For example, the following demo changes the textarea's
+font size and then triggers a resize.
 
 <!-- example(text-field-autosize-textarea) -->
 

src/components-examples/cdk/text-field/index.ts

@@ -1,3 +1,4 @@
 export {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example';
 export {TextFieldAutofillMonitorExample} from './text-field-autofill-monitor/text-field-autofill-monitor-example';
+export {TextFieldAutosizeTextareaBasicExample} from './text-field-autosize-textarea-basic/text-field-autosize-textarea-basic-example';
 export {TextFieldAutosizeTextareaExample} from './text-field-autosize-textarea/text-field-autosize-textarea-example';

src/components-examples/cdk/text-field/text-field-autosize-textarea-basic/text-field-autosize-textarea-basic-example.css

@@ -0,0 +1,13 @@
+.demo-field {
+  margin-bottom: 16px;
+}
+
+.demo-label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.demo-textarea {
+  box-sizing: border-box;
+  width: 100%;
+}

src/components-examples/cdk/text-field/text-field-autosize-textarea-basic/text-field-autosize-textarea-basic-example.html

@@ -0,0 +1,14 @@
+<div class="demo-field">
+  <label class="demo-label" for="autosize-basic">Autosize textarea</label>
+  <textarea class="demo-textarea" id="autosize-basic" cdkTextareaAutosize></textarea>
+</div>
+
+<div class="demo-field">
+  <label class="demo-label" for="autosize-min-max">Autosize textarea with minimum and maximum rows</label>
+  <textarea
+    class="demo-textarea"
+    id="autosize-min-max"
+    cdkTextareaAutosize
+    cdkAutosizeMinRows="2"
+    cdkAutosizeMaxRows="5"></textarea>
+</div>

src/components-examples/cdk/text-field/text-field-autosize-textarea-basic/text-field-autosize-textarea-basic-example.ts

@@ -0,0 +1,11 @@
+import {TextFieldModule} from '@angular/cdk/text-field';
+import {Component} from '@angular/core';
+
+/** @title Basic auto-resizing textarea */
+@Component({
+  selector: 'text-field-autosize-textarea-basic-example',
+  templateUrl: './text-field-autosize-textarea-basic-example.html',
+  styleUrl: './text-field-autosize-textarea-basic-example.css',
+  imports: [TextFieldModule],
+})
+export class TextFieldAutosizeTextareaBasicExample {}