Does Angular Material have built in autosizing for textareas?

Question

I am able to import MatTextareaAutosize from Angular Material, but I see nothing about it in the docs and have not found a way to use it.

I expected to use something like this:

<mat-form-field>
    <textarea matInput matAutosize></textarea>
</mat-form-field>

Is there a way to get autosizing text boxes with angular material?

Kalpak

note: it can screw up the scrollbar if not at 100% zoom (amongst other conditions) - Possible solutions here github.com/angular/material2/issues/12902 – Interviewee

Answer 1

The answer is simple: it should be matTextareaAutosize, not just matAutosize: https://github.com/angular/material2/blob/master/src/material-examples/input-autosize-textarea/input-autosize-textarea-example.html

Caution! Apparently, this will be removed in version 7 and is currently deprecated https://material.angular.io/components/input/api#MatTextareaAutosize

PS: See also comment from @Simon_Weaver regarding the deprecation

Koniology

Thanks, that is simple. Good to know about those examples as well. – Kalpak

Regarding the deprecation : <textarea> elements can be made to automatically resize by using the cdkTextareaAutosize directive available in the CDK. So you're supposed to use that. – Interviewee

...Although nothing is ever simple and I get leftover scrollbars even at 100% zoom level :-( It's off by one pixel! It'll set a height of 108px and I'll change it to 109% and they'll go away. – Interviewee

github.com/angular/material2/blob/… – Interviewee

Answer 2

For my work apply this to textarea:

Angular 7

<textarea cdkTextareaAutosize #autosize="cdkTextareaAutosize"cdkAutosizeMinRows="1" cdkAutosizeMaxRows="5"> </textarea>

Verify the scroll, in case of not showing verify the CSS property 'overflow: auto'

Kainite

Also don't forget to import the TextFieldModule from cdk in your module: import { TextFieldModule } from '@angular/cdk/text-field'; – Ogilvy

Thank you, @Nadine! All the examples and documentation assumed matInput would also be on the textarea, and I couldn't find the cdk module to import if I was just using cdk. – Abbottson

This worked for me without having to import the TextFieldModule in my module. Also I didn't have to use the attribute #autosize="cdkTextareaAutosize", also could someone tell me what is the importance of using this attribute or selector? Finally this is how my final code looked: <textarea cdkTextareaAutosize cdkAutosizeMinRows="2" cdkAutosizeMaxRows="5" matInput></textarea> – Enow

Also here's a stackBlitz example of textarea autosizing stackblitz.com/angular/… – Enow

This is a very nice option but it makes the typing very slow – Mouth