Home » Javascript » Is it possible to bind input to two variables at the same time in Angular?

Is it possible to bind input to two variables at the same time in Angular?

Posted by: admin June 30, 2018 Leave a comment

Questions:

This is a typical Angular’s Material matInput:

<input matInput [(ngModel)]="model.property" name="property" />

Now to apply logic when model changes, a commonly solution proposed by other developers in SO is to break banana-in-the-box into property-binder and event-hook expressions:

<input matInput [ngModel]="model.property" (ngModelChange)="model.property=someLogic($event)" />

Based on this logic, I created a digitGroup function that gets the input number, puts commas in between each three numbers, and shows that in the matInput field.

However, the problem is that now the model.property 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 undigitGroup(model.property) first.

Is it possible that I bind matInput to two properties of the model at the same time? That way I can have model.property for calculations and model.digitGroupedProperty to show to the user, both at the same time.

Answers: