Angular 4 directive to manipulate input text

Change your directive to

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

@Directive({
  selector: '[inputTextFilter]'
})

export class InputTextFilterDirective {
  @Input() ngModel: string;

  constructor(private el: ElementRef) {
    console.log('constructed InputTextFilterDirective');
    (el.nativeElement as HTMLInputElement).value = '';
  }

  @HostListener('change')
  onChange() {
    console.log('in change InputTextFilterDirective');
    (el.nativeElement as HTMLInputElement).value.trim();
    console.log(this.ngModel);
  }
}

Try and see if that works. If it didn't, try changing the event from 'change' to 'input' or 'ngModelChange'