title: Angular 7 | HostListener blur conditional stop all other event callbacks
body: <p>I have one requirement where We want the user to resolve input field errors and until that is done user is not allowed to do any other operation on-screen.</p>
  
  <p>For the same, I have implemented HostListener on the input field and onBlur I am setting the focus back to the input field if there are validation scenarios fail.</p>
  
  <p>And, i am doing e.preventDefault() and e.stopPropagtion() to stop all other event callback to be executed on the page (as after setting <code>focus</code> back, <code>blur</code> will be the first event to be executed).</p>
  
  <p>But somehow on any external event, <code>blur</code> does get executed but it is not restricting other events to be executed. Those are also getting executing without which I am not able to achieve the desired functionality.</p>
  
  <pre><code>import { Directive, HostListener, Input } from '@angular/core';
  
  @Directive({
    selector: '[appNumberFormat]'
  })
  export class NumberFormatDirective {
  
    constructor() { }
  
    @HostListener('blur', ['$event']) blur(evt) {
      evt.preventDefault();
      console.log('field focus...');
      evt.target.focus();
      return false;
      // if (evt.target.value.trim() === '') {
      //     this.formControl.control.setValue(this.defaultValue);
      // }
    }
  }
  </code></pre>
  
  <p>I have replicated the same scenario in stackBlitz. Please have a look.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-54ermg" rel="noreferrer">https://stackblitz.com/edit/angular-54ermg</a></p>