Ionic 4 ion-textarea autoGrow does not display properly with ngModel?

Ionic Framework
1

Hello, when the ion-textarea is first displayed with text using ngModel, the autoGrow directive does not work as the height of the textarea (within ion-textarea) is initially set to 0px. As soon as I edit the text, the height is set automatically and works. Here’s my code:

<ion-textarea [(ngModel)]="note" placeholder="Write a note here..." autoGrow="true" autoFocus="true" maxlength="400"></ion-textarea>

Is there a way to get autogrow working with ngmodel when it first displays? Thanks

2

If you bind the [(ngModle)] (I think) there is no value change event fired.

Take a look at the code for the autoGrow attribute here:

You will see, that the styles are applied after changing the value, so the easiest way would be to programatically fire a change (ionChange) event for the input.

Another (hacky) way would be to take the code, which is responsible for the autoGrow feature and apply it by yourself:

Hope it helps.

Cheers
Unkn0wn0x

3

Try This.
Add
rows=“6” cols=“10”
And
[ngModelOptions]="{standalone: true}"

<ion-textarea [(ngModel)]="note" [ngModelOptions]="{standalone: true}" placeholder="Write a note here..." autoGrow="true" autoFocus="true" maxlength="400" rows="6" cols="10"></ion-textarea>
4

Same issue. What fixed the issue for me was checking whether there is any input:

<ion-textarea [(ngModel)]="note" [autoGrow]="!!note"></ion-textarea>
1 Like
5

You can try something like this as well.

<ion-textarea #textAres rows="4" (ionFocus)="textAres.autoGrow=true" [(ngModel)]="value" ></ion-textarea>
2 Likes