Autosize text area in ionic?


Please,how can we autosize text area ?


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” >


Thanks for help !

I got this error

Can’t bind to ‘auto-resize-textarea’ since it isn’t a known property of ‘ion-textarea’.

  1. If ‘ion-textarea’ is an Angular component and it has ‘auto-resize-textarea’ input, then verify that it is part of this module.
  2. If ‘ion-textarea’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("roup]=“messageForm” class=“aligner” (submit)=“sendMessage(message)” novalidate>
    <ion-textarea [ERROR ->][auto-resize-textarea]=“320” class=“textareastyle” autocorrect=“on” type=“text” [(ngModel)]=“message.”): ng:///UneconversationPageModule/UneconversationPage.html@86:20


Anyone have an idea ?