Ionic 2 ion-textarea autoresize

autoresize.ts

// An autoresize directive that works with ion-textarea in Ionic 2
// Usage example: <ion-textarea autoresize [(ngModel)]="body"></ion-textarea>
// Based on https://www.npmjs.com/package/angular2-autosize

import { Directive, HostListener, ElementRef } from "@angular/core";

@Directive({
	selector: "ion-textarea[autoresize]" // Attribute selector
})
export class Autoresize {

	@HostListener("input", ["$event.target"])
	onInput(textArea: HTMLTextAreaElement): void {
		this.adjust();
	}
	constructor(public element: ElementRef) {
	}
	ngOnInit(): void {
		this.adjust();
	}
	adjust(): void {
		let ta = this.element.nativeElement.querySelector("textarea");
		ta.style.overflow = "hidden";
		ta.style.height = "auto";
		ta.style.height = ta.scrollHeight + "px";
	}

}

Thanks a lot for putting this up. Exactly what I needed right now and it works like a charm :-).

Ok one small thing: you might wanna check if ta is null in the adjust() method.
I got a Uncaught TypeError: Cannot read property 'style' of null in some cases after leaving the screen that contained the <ion-textarea>. Checking ta fixed that for me.

I have used if (ta) { ... } in typescript@2.0.9, @angular/core@2.2.1
It didn't work in the initial state without this for me

Following the previous commentators, I just did this:

https://gist.github.com/Eetezadi/368658ca4364354cfca768f24e2ac810

I think there should be a little timeout before
ta.style.height = ta.scrollHeight + "px";
to give it a little time to recalculate the scrollHeight.
For me, the ScrollHeight was not correct at initial run.

I did this:

setTimeout(() => {
    ta.style.height = ta.scrollHeight + "px";
}, 100);

how to use autoresize.ts file under my ionic project?

Thanks for this. For something small like this I would rather have an in-house impl than another module I have to import.

Where to put the file autoresize.ts and how to use it?

import the file and add it to

@NgModule({
  declarations: [
    Autoresize
  ]
})

Thanks for this :) Made some changes in here:
https://gist.github.com/bruno-campos/14a0977743ebda598936a246a55fabb3

Basically I wanted it to work having a maximum height and also don't override my initial css height value

Usage:

<ion-textarea autoresize="100"></ion-textarea>

For a 100px maximum height

Thanks to all, this works beautifully.

I've updated @bruno-campos addition to allow you to optionally add a maximum height for the textarea.
https://gist.github.com/kinoli/da7aee28934ec5728fb28d1ac3548230

<ion-textarea autoresize [(ngModel)]="body"></ion-textarea>
<ion-textarea autoresize="100" [(ngModel)]="body"></ion-textarea>

Enjoy!

Amazing! Thanks! Working perfectly with Ionic 3

Hi everyone,

I'm using this tricks for months but a user report me a bug. When you put lots of new lines, the apps seems to be moving to the top : my header is going under Status bar and a blank space appears in the bottom.

Has anyone this kind of bug ? If not could you send me your Status bar config. Here is mine :

<plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
<preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarStyle" value="lightcontent" />
    <preference name="StatusBarDefaultScrollToTop" value="false" />

Thanks in advance

@kinoli Thaank you sir its working fine in ionic 3