Add minimal example for cdkTextareaAutosize

[learnwell]

What is the expected behavior?

The docs for Automatically resizing a <textarea> and the stackblitz example should only mention what's actually needed to make it work.

What is the current behavior?

They mention a whole lot of stuff, removing which still lets things function! So its not clear why its been put there and its misleading without an explanation.

Extra stuff in the HTML template:

#autosize="cdkTextareaAutosize"

Extra stuff in the component:

import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {..., NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';
...
  constructor(private ngZone: NgZone) {}
  @ViewChild('autosize') autosize: CdkTextareaAutosize;
  triggerResize() {
    // Wait for changes to be applied, then trigger textarea resize.
    this.ngZone.onStable.pipe(take(1))
        .subscribe(() => this.autosize.resizeToFitContent(true));
  }
}

That's 4 extra imports, a viewchild binding and when I put a console.log statement inside either triggerResize or the subscribed function ... nothing happens ... meaning the code never runs! So what is the point of all that extra stuff? Maybe its actually useful for something else that the docs failed to mention?

What are the steps to reproduce?

This stackblitz shows that nothing other than cdkTextareaAutosize cdkAutosizeMinRows cdkAutosizeMaxRows is needed to Automatically resizing a <textarea>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular v7, Material v7 are the versions I used.

Is there anything else we should know?

Keep up the good work 👍

[crisbeto]

The extra logic is there to make sure that the textarea resizes when the font size is changed through the mat-select. If you just want a textarea that resizes to fit the content, you only need the cdkTextareaAutosize.

[learnwell]

Perfect so how about after

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.

Adding the following sentence too:

for example here the `mat-select` changes the font size.

Thanks!

[jerome-nelson]

Can I take this?

[jerome-nelson]

Submitted a PR with basic example but @jelbourn not entirely sure how to test this compiles correctly on Material website

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.