Change size of 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.