To use the CDKTextareaAutosize with the mat-table component in Angular, you need to follow these steps:
import { Component } from '@angular/core';
import { CDKTextareaAutosize } from '@angular/cdk/text-field';
<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>
Add the cdkTextareaAutosize attribute and the cdkAutosizeMinRows and cdkAutosizeMaxRows attributes with minimum and maximum row values to the textarea element.
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.
Asked: 2022-12-02 11:00:00 +0000
Seen: 10 times
Last updated: Jan 31 '22