title: How to use angular Hostlistener on load of component
body: <p>In my angular app, I am using a directive which formats the number. This directive is used in html like below.</p>
  
  <p>HTML
   </p>
  
  <p>TYPESCRIPT</p>
  
  <pre><code> @Directive({
    selector: '[numFormatter]',
  })
  export class FormatterDirective implements OnInit {
    private el: HTMLInputElement;
    constructor(
      private elementRef: ElementRef,
      private currencyPipe: NumberPipe
    ) {
      this.el = this.elementRef.nativeElement;
    }
      ngOnInit() {
     this.el.value = this.currencyPipe.transform(this.el.value);
    }
  
     @HostListener('focus', ['$event.target.value'])
     onFocus(value) {
       this.el.value = this.currencyPipe.parse(value); // opossite of transform
    }
  
     @HostListener('focusout', ['$event.target.value'])
     onBlur(value) {
       this.el.value = this.currencyPipe.transform(value);
     }
    }
  </code></pre>
  
  <p>The directive works well when we focusout of the field. I want to use this directive when the component loads, so that
    if there is a value inthat inout field, it should get formatted. 
    Not sure I I Should use HostBinding or should we use a different approach.</p>