Why is my directive not working?

Ionic Framework ionic-v3
1

Im trying to write a simple directive which resizes text input elements according to the amout of text being entered.
This is my code:

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

@Directive({
  selector: '[auto-resize-text-input]' // Attribute selector
})
export class AutoResizeTextInput {
  constructor(private element: ElementRef) {
    console.log('Hello AutoResizeTextInput Directive');
  }

  @HostListener('input', ['$event.target']) oninput() {
    this.AutoResizeTextInput();
  }

  private AutoResizeTextInput() {
    this.element.nativeElement.style.overflow = 'hidden';
    this.element.nativeElement.style.height = 'auto';
    this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + 'px';
  }
}
2

Check this out Ion-texarea elastic directive. It might be helpful, if you use ion-textarea in your app.