textarea autosize directive for ionic/angular 4 (updated to work with 4.0.0)

textarea-autosize.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
import { Observable, fromEvent } from 'rxjs';
import { DomController } from '@ionic/angular';


@Directive({
  selector: 'ion-textarea[autosize]'
})
export class TextareaAutosizeDirective implements OnInit {

  private inputObservable: Observable<any>;

  constructor(private el: ElementRef, private domCtrl: DomController) { }

  ngOnInit() {
    const mutationObserver = new MutationObserver(() => {
      this.el.nativeElement.style.height = `${this.el.nativeElement.lastChild.scrollHeight}px`;

      this.inputObservable = fromEvent(this.el.nativeElement.querySelector('textarea'), 'input');
      this.inputObservable.subscribe((inputEvent: any) => {

        const textAreaNative = inputEvent.target;
        this.domCtrl.write(() => {
          this.el.nativeElement.style.height = 'auto';
          textAreaNative.style.height = 'auto';
          textAreaNative.style.height = `${textAreaNative.scrollHeight}px`;
        });

      });
    });
    mutationObserver.observe(this.el.nativeElement, {
        childList: true,
    });
  }
}

Usage: <ion-textarea autosize [(ngModel)]="textdata"></ion-textarea>

or <ion-textarea auto-grow="true">my text</ion-textarea> in ionic 4.4 ;)