Autosize text area in ionic?

Ionic Framework ionic-v3
1

Please,how can we autosize text area ?

2

This is my AutoResizeTextareaDirective:

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

@Directive({
selector: ‘[auto-resize-textarea]’
})
export class AutoResizeTextareaDirective implements OnInit {
@HostListener(‘input’, [‘$event.target’])
onInput(textArea: HTMLTextAreaElement): void {
this.adjust();
}

@Input('auto-resize-textarea') maxHeight: number;

constructor(public element: ElementRef) {}

ngOnInit(): void {
    setTimeout(() => {
        this.adjust();
    }, 500);
}

adjust(): void {
    let ta = this.element.nativeElement.querySelector("textarea");
    if (ta) {
        ta.style.overflow = "hidden";
        ta.style.height = null;
        ta.style.height = Math.min(ta.scrollHeight, this.maxHeight) + "px";
    } else {
        this.element.nativeElement.style.overflow = "hidden";
        this.element.nativeElement.height = null;
        this.element.nativeElement.style.height = 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” >

3

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
4

Anyone have an idea ?

5

this package does all the autosizing of my ion-textareas for me https://github.com/chrum/ngx-autosize 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

1 Like