title: binding ngModel instead of value to a custom Angular directive for currency input
body: <p>I'm currently using a custom mat-input-currency format directive to automatically format my field inputs to currency. the npm repo is found <a href="https://www.npmjs.com/package/mat-currency-format" rel="nofollow noreferrer">here</a>.</p>
  <p>However, the directive binds the element data to <code>[value]</code> of the input i and I need to 2-way bind it to <code>[(ngModel)]</code>
  the binding works but the currency format display doesn't show when it is first loaded, only when clicking on the input and then going blur. binding it to <code>[value]</code> however, displays it in currency format on load.</p>
  <p>here is the <a href="https://stackblitz.com/edit/angular-2wnaxw?file=src/app/app.component.ts" rel="nofollow noreferrer">StackBlitz</a> I forked from the <a href="https://stackblitz.com/edit/angular-vmh5gw?file=src/app/app.component.ts" rel="nofollow noreferrer">Demo</a>
  I tried writing a function maybe to tap into an onload event for the input but not sure how to go about that. is there a way to make it load with the ngModel formatted? the event doesn't seemed to kick off in the onload.</p>
  <pre><code>  &lt;mat-form-field *ngIf=&quot;mpPatient.ssissdiawardLetter=='Y'&quot; appearance=&quot;standard&quot;&gt;
            &lt;mat-label&gt;SSI/SSDI Award Amount&lt;/mat-label&gt;
            &lt;input matInput type=&quot;text&quot;
           (onload)=&quot;onLoadCurrencyEvent($event, mpPatient.ssissdiawardAmount)&quot;
            mvndrMatCurrencyFormat [allowNegative]=&quot;false&quot; [currencyCode]=&quot;'USD'&quot;
            [(ngModel)]=&quot;mpPatient.ssissdiawardAmount&quot;
            (blur)=&quot;updateUSAmount($event, mpPatient.ssissdiawardAmount)&quot;&gt;
          &lt;/mat-form-field&gt;
  </code></pre>