title: Is it possible to bind input to two variables at the same time in Angular?
body: <p>This is a typical Angular's Material <code>matInput</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input matInput [(ngModel)]="model.property" name="property" /&gt;
  </code></pre>
  
  <p>Now to apply logic when the model changes, a common solution proposed by other developers in SO is to break <em>banana-in-the-box</em> into <strong>property-binder</strong> and <strong>event-hook</strong> expressions:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input matInput [ngModel]="model.property" (ngModelChange)="model.property=someLogic($event)" /&gt;
  </code></pre>
  
  <p>Based on this logic, I created a <code>digitGroup</code> function that gets the input number, puts commas in between each three numbers, and shows that in the <code>matInput</code> field.</p>
  
  <p>However, the problem is that now the <code>model.property</code> is a string representing the digit-grouped number, rather than being a real JavaScript number, so in each place I need to access its value and do some mathematical operation on it, I need to <code>undigitGroup(model.property)</code> first.</p>
  
  <p>Is it possible that I bind <code>matInput</code> to two properties of the <code>model</code> at the same time? That way I can have <code>model.property</code> for calculations and <code>model.digitGroupedProperty</code> to show to the user, both at the same time.</p>