title: Angular 4 directive to manipulate input text
body: <p>I have created a simple directive to trim my input text (I plan to expand it's functionality later - so please don't recommend a simple onkeyup function), I would like to make a directive work.</p>
  
  <p>I use my directive like this:</p>
  
  <pre><code>    &lt;input type="text" class="form-control" inputTextFilter [(ngModel)]="data.name"&gt;
  </code></pre>
  
  <p>and my directive is as follows:</p>
  
  <pre><code>import { Directive, HostBinding, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[inputTextFilter]'
  })
  
  export class InputTextFilterDirective {
    value: string;
  
    constructor() {
      console.log('contrusted InputTextFilterDirective');
      this.value = '';
    }
  
    @HostListener('change')
    onChange($event) {
      console.log('in change InputTextFilterDirective');
      this.value = $event.target.value.trim();
      console.log(this.value);
    }
  }
  </code></pre>
  
  <p>I see the constructor message log to the window, but the on change message never appears, and my value never changes (spaces aren't trimmed from end).  I suspect hostListeners and hostProperties aren't right as I've seen lots of conflicting examples...but can't confirm a right way.</p>
  
  <p>What's wrong with this?</p>