title: Angular 2 - Update ngModel inside a custom directive at @HostListener('blur')
body: <p>I have a custom directive that only accepts number. When I input 1.2, it is good. But when I type only 1. I want to erase the inputted 1. on blur. I have tried several ways on how to set the value to empty string inside the <code>onBlur</code> but still no luck at all. Here is the code snippet: </p>
  
  <pre><code>@Output() ngModelChange = new EventEmitter();
  
  constructor(el: ElementRef, public model: NgControl){
   //Instead of NgControl, I have also tried the NgModel but it did not work
   this.el = el.nativeElement;
  }
  
  @HostListener('blur', ['$event']) onBlur($event){
   if(isNaN(this.el.value.replace(/(,)/g, '')) || this.el.value[this.el.value.length - 1] === '.' || this.el.value[this.el.value.length - 1] === '-'){
      this.el.value = '';
      this.model.control.updateValue('');
      this.model.viewToModelUpdate('');
      this.ngModelChange.emit('');
   } 
  }
  </code></pre>
  
  <p>This does erase the 1. in the input field. But when I print out the value of the <code>ngModel</code> that holds the data, the value is 1</p>
  
  <p>In that case, I want to set the ngModel value to empty string. How can I do that inside the blur?</p>
  
  <p>Thank you!</p>