Why is my directive not working?


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';

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

  @HostListener('input', ['$event.target']) oninput() {

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


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