Revision history [back]

To use the CDKTextareaAutosize with the mat-table component in Angular, you need to follow these steps:

1. Import the CDKTextareaAutosize directive from the @angular/cdk/text-field module.

import { Component } from '@angular/core';
import { CDKTextareaAutosize } from '@angular/cdk/text-field';

1. Add the CDKTextareaAutosize directive to the textarea element in the table cell template.

<ng-container matColumnDef="comments">
  <th mat-header-cell *matHeaderCellDef>Comments</th>
  <td mat-cell *matCellDef="let element">
    <textarea cdkTextareaAutosize
              cdkAutosizeMinRows="1"
              cdkAutosizeMaxRows="5"
              [(ngModel)]="element.comments"></textarea>
  </td>
</ng-container>

1. Add the cdkTextareaAutosize attribute and the cdkAutosizeMinRows and cdkAutosizeMaxRows attributes with minimum and maximum row values to the textarea element.

2. Bind the textarea to the comments property in the element using the ngModel directive.

By following these steps, the CDKTextareaAutosize directive will work with the mat-table component and the textarea will grow or shrink to fit its content.