Change size of textarea

I currently have a textarea like this:

<textarea matInput rows="5" cols="40" placeholder="text"></textarea>

However, it is always the same size.

Any idea on how to change the size of the textarea?

Depending on what you've meant by:

> However, it is always the same size.

There are two options.

OPTION 1 (STATIC size depending on rows \ cols):

Currently, only rows affects the Material textarea height, cols doesn't change its width.

Therefore for increasing width, we have to use the CSS width property on a mat-form-field containing our textarea:

<mat-form-field style="width: 300px;">
    <textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>

OPTION 2 (DYNAMIC size to fit textarea content):

In Material 6, CdkTextareaAutosize directive was added.

From an official docs:

> The cdkTextareaAutosize directive can be applied to any <textarea> to > make it automatically 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.

And here's a simplified example from there:

<mat-form-field>
    <mat-label>Autosize textarea</mat-label>
    <textarea
        matInput
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5">
    </textarea>
</mat-form-field>

NOTE:
matTextareaAutosize mentioned in other answers is deprecated and will be removed in the next major release. The official docs already use cdkTextareaAutosize instead.

Here's an example :

<mat-form-field>
  <mat-label>Description</mat-label>
  <textarea matInput formControlName="description" matTextareaAutosize matAutosizeMinRows=1 matAutosizeMaxRows=5></textarea>
</mat-form-field>

Reference: https://material.angular.io/components/input/api

Angular materials 7.2:
https://material.angular.io/components/input/examples

<mat-form-field>
  <mat-label>Autosize textarea</mat-label>
  <textarea matInput cdkTextareaAutosize
            cdkAutosizeMinRows="2"
            cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>

Pay attention to cdkTextareaAutosize, cdkAutosizeMinRows, cdkAutosizeMaxRows

See example. It is important to add css to the form to specify the width:

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }

and also css to the textarea:

.example-full-width {
  width: 100%;
}

If you do not add the css to the form, then the expand icon displays in the incorrect position.

You can try to adjust the hight of your texarea by applying matTextareaAutosize and assigning values for properties matAutosizeMinRows and matAutosizeMaxRows.

See https://material.angular.io/components/input/api for additional details.