title: Angular 2 attribute directive to clear textbox?
body: <p>using Angular 2.1.0... 
  I am working on an directive that, when applied to textboxes displays an "X" in the right of the textbox,  This "X" when clicked, should delete the text from the textbox and clear the model, similar to this angularjs repo <a href="https://github.com/amageed/angular-resetfield" rel="nofollow noreferrer">https://github.com/amageed/angular-resetfield</a>.</p>
  
  <p>My issue is that I can pass the input value to the directive but I cannot get the model to clear.  Now on my clearFunction I am getting: <code>TypeError: Cannot read property 'emit' of undefined</code></p>
  
  <p>I recognize that I may be going at this in a completely wrong approach and I am open to any suggestions.</p>
  
  <p>Here is how I originally plan to use it in the html:</p>
  
  <p><code>&lt;input type="text" placeholder="Search" [(ngModel)]="filterText" [(inputClear)]="filterText"&gt;</code></p>
  
  <p>Here is my directive:</p>
  
  <pre><code>@Directive({
  /* tslint:disable */
  selector: '[inputClear]',
  exportAs: 'inputClear'
  })
  
  export class inputClearDirective implements OnInit, OnChanges {
  
  @Input() inputClear: any;
  @Output() inputClearChange = new EventEmitter();
  constructor(private renderer: Renderer, private el: ElementRef) {
  }
  
  ngOnChanges(change) {
      console.log('val', this.inputClear);
      if (this.inputClear) {
          console.log('show');
          this.showElement();
      }
      if (!this.inputClear) {
          this.hideElement();
          console.log('hide');
      }
  }
  //on Init add x to text box
  ngOnInit() {
      let me = this.el.nativeElement as HTMLInputElement;
      if (me.nodeName.toUpperCase() !== 'INPUT') {
          throw new Error('Invalid input type for clearableInput:' + me);
      }
      let wrapper = document.createElement('span') as HTMLSpanElement;
      let searchIcon = document.createElement('i') as HTMLElement;
      searchIcon.id = 'searchIcon';
  
      // // calls the clearvalue function
      searchIcon.addEventListener('click', this.clearValue);
  
      ////clears the textbox but not the model
      // searchIcon.addEventListener('click', function () {
      //     console.log('clicked');
      //     let inp = this.parentElement.previousSibling as HTMLInputElement;
      //     if (inp &amp;&amp; inp.value.length) {
  
      //         inp.value = '';
      //     }
  
      // });
      wrapper.setAttribute('style', 'margin-left: -37px;position: relative; margin-right:37px;');
  
      searchIcon.setAttribute('style', 'display:none');
      searchIcon.className = 'fa fa-times fa-1x';
      wrapper.appendChild(searchIcon);
      wrapper.id = 'searchSpan';
  
      me.insertAdjacentElement('afterend', wrapper);
  }
  
  showElement() {
      let searchIcon = document.getElementById('searchIcon');
      if (searchIcon) {
          searchIcon.removeAttribute('style');
      }
  }
  
  hideElement() {
      let searchIcon = document.getElementById('searchIcon');
      if (searchIcon) {
          searchIcon.setAttribute('style', 'display:none');
      }
  }
  
  clearValue() {
      console.log('clicked');
      this.inputClear = '';
      this.inputClearChange.emit(this.inputClear);
  }
  }
  </code></pre>
  
  <p>Edit:  the effect I am after is something like this:
  <a href="https://i.stack.imgur.com/BZt55.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZt55.png" alt="enter image description here"></a></p>
  
  <p>for re-usability, I was trying to create an attribute directive to handle this all rolled up.</p>