title: Formating Number / Currency in Angular 6 Directive
body: <p>I created a Currency Directive which I will <strong>use in every input element</strong> which needs currency format.</p>
  
  <p>So I have 2 Host Listeners one is OnFocus, the second is Blur</p>
  
  <p>And it works perfectly. But I need to format the value of input when I set the value of input by binding</p>
  
  <p>So when I open a modal I get unformatted value... NgOnInit doesn't work because it raises too much early</p>
  
  <p>Here is my directive code.</p>
  
  <pre><code>import { Directive, HostListener, Input, OnInit, ElementRef, AfterViewInit, OnChanges, Renderer2, ViewChild } from '@angular/core';
  
  import { CurrencyPipe, getCurrencySymbol } from '@angular/common';
  
  import { NgControl, ControlValueAccessor } from '@angular/forms';
  
  import { CustomCurrencyPipe } from '../pipes/custom-currency.pipe';
  
  import { ModalDirective } from 'ngx-bootstrap/modal';
  
  
  
  @Directive({
  
    selector: '[appCurencyFormat]',
  
    providers: [CustomCurrencyPipe]
  
  })
  
  
  
  export class CurrencyFormatDirective implements OnInit{
  
    //@Input('appNumberFormat') params: any;
  
    @Input() decimalNumber: number = 2;
  
    @Input() symbol: string = "symbol";
  
    //@Input() OnlyNumber: boolean;
  
    local: string;
  
    decimal: string;
  
    currency: string;
  
    element: any;
  
  
  
    @ViewChild(ModalDirective) childModal: ModalDirective;
  
  
  
    constructor(private elementRef: ElementRef, private ngControl: NgControl, private currencyPipe: CustomCurrencyPipe, private _renderer: Renderer2) {
  
  
      this.element = this.elementRef.nativeElement;    
  
    }
  
  
  
    @HostListener('keydown', ['$event']) onKeyDown(event) {
  
      let e = &lt;KeyboardEvent&gt;event;
  
      //190 in array for .
  
        if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
  
          // Allow: Ctrl+A
  
          (e.keyCode === 65 &amp;&amp; (e.ctrlKey || e.metaKey)) ||
  
          // Allow: Ctrl+C
  
          (e.keyCode === 67 &amp;&amp; (e.ctrlKey || e.metaKey)) ||
  
          // Allow: Ctrl+V
  
          (e.keyCode === 86 &amp;&amp; (e.ctrlKey || e.metaKey)) ||
  
          // Allow: Ctrl+X
  
          (e.keyCode === 88 &amp;&amp; (e.ctrlKey || e.metaKey)) ||
  
          // Allow: home, end, left, right
  
          (e.keyCode &gt;= 35 &amp;&amp; e.keyCode &lt;= 39)) {
  
          // let it happen, don't do anything
  
          return;
  
        }
  
        // Ensure that it is a number and stop the keypress
  
        if ((e.shiftKey || (e.keyCode &lt; 48 || e.keyCode &gt; 57)) &amp;&amp; (e.keyCode &lt; 96 || e.keyCode &gt; 105)) {
  
          e.preventDefault();
  
        }    
  
    }  
  
  
  
    @HostListener('focus', ['$event.target.value'])
  
    onFocus(value: any) {
  
      this.ctrl.setValue(this.currencyPipe.convertToNumber(value));    
  
    }
  
  
  
    @HostListener('blur', ['$event.target.value'])
  
    onBlur(value: any) {
  
      this.ctrl.setValue(this.currencyPipe.transform(value, this.decimalNumber, this.symbol));
  
    }
  
  
  
    get ctrl() {    
  
      return this.ngControl.control;
  
    }
  
  }
  </code></pre>
  
  <p>My solution is something with a set interval in ngOnInit...</p>
  
  <pre><code>ngOnInit() {
          let m = window.setInterval(() =&gt; {
          console.log("Upao sam");
          console.log(this.ctrl.value);
          if (this.ctrl.value) {
            console.log(this.ctrl.value);
            if (seted) {
              window.clearInterval(m);
            } else {
              seted = true;
              this.ctrl.setValue(this.currencyPipe.transform(this.ctrl.value, this.decimalNumber, this.symbol));
            }
          }
        }, 500);
  }
  </code></pre>
  
  <p>Does anyone have any idea which HostListener I can use for it, to try to avoid using <code>window.setInterval()</code>. Or if anyone has any idea how can I resolve this problem? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><code>ngOnChanges()</code> isn't raised every time, so the selected duplicate question can't resolve my problem.</p>