title: Angular 5 template driven Decimal input
body: <p>I'm working with Angular 5 template driven forms, and have several numeric inputs in a form. </p>
  
  <p>The requirement I have is very simple, and I'm astounded that I can't find a solution to it</p>
  
  <p>Basically each numeric input should display as a decimal with thousand separators and a configurable number of decimal places, but store the value as a number (without commas) on the model. </p>
  
  <p>I've looked at pipes which aren't applicable as they are display only and do not work with two way binding
  I've also searched high and low for an example of a directive that does this by exposing the NgModel of the control and manipulates its data and no joy there either.. </p>
  
  <p>I've looked at the one way binding + a setter in the TypeScript but that is ugly and not reusable </p>
  
  <pre><code>&lt;input type="number" [NgModel]="somevalue | number : '2.2-6'" (ngModelChange)="somevalue = formatNumber($event)"
  </code></pre>
  
  <p>Can you point me in the right direction? 
  I think the directive is the way to go but I can't find a clear example of how to go about separating the input binding from the displaying, and importantly displaying the right value on load if the data is already populated in the model</p>
  
  <p>Thanks in advance!</p>