Autosize ion-textarea


I’m trying to auto-adjust the height of a text area using this directive: Here
It’s works when i manually type in the text area but if i add a button to set a multiline text into the text area, the height won’t adjust automaticaly.

How can I handle it ?

Thank you

Is this what you’re looking for?
I’ve changed some code, according to the code I use in my apps.

1 Like

Thank you for your response but i don’t see any difference in the code between your link and my link

Ow, weird.
This link should do the trick:

Without directive:

I’ve added a button using your directive but it still doesn’t work :frowning:

This is my AutoResizeTextareaDirective:

import {Directive, HostListener, ElementRef, Input, OnInit} from '@angular/core';

    selector: '[auto-resize-textarea]'
export class AutoResizeTextareaDirective implements OnInit {
    @HostListener('input', ['$'])
    onInput(textArea: HTMLTextAreaElement): void {
    @Input('auto-resize-textarea') maxHeight: number;
    constructor(public element: ElementRef) {}
    ngOnInit(): void {
        setTimeout(() => {
        }, 500);
    adjust(): void {
        let ta = this.element.nativeElement.querySelector("textarea");
        if (ta) {
   = "hidden";
   = null;
   = Math.min(ta.scrollHeight, this.maxHeight) + "px";
        } else {
   = "hidden";
            this.element.nativeElement.height = null;
   = Math.min(this.element.nativeElement.scrollHeight, this.maxHeight) + "px";

To use that simply add the attribute auto-resize-textarea to your ion-textarea with a max-height in pixels:

<ion-textarea [formControlName]="biography" [auto-resize-textarea]="320" ></ion-textarea>

Thank you ramon but i have the same problem.

Maybe i do something wrong ?

Sorry, @bbarascou, I did not see that the directive you used was the same as the one I used.

I am trying to find a solution.

I’ll tell you if there is any progress with this.

After a lot of frustration I did something like this

var breaklines = (\r?\n|\r/)).length;
var textlines = / 30; = Math.round(textlines) + breaklines;

Inside the ionChange event handler where ev = element’s event

this package does all the autosizing of my ion-textareas for me just follow the guide and get it working, if it doesn’t work importing it into the app.module.ts then try importing it into the page’s module, I personally needed that dunno if you will, but package is a life saver


As of v4.4.0, ion-textarea has a autoGrow directive
GitHub - Ionic 4.4.0 textarea changes

I haven’t tested it but it is there

1 Like