I'm currently developing an Angular 2 web application. The model I have created consists of a few primary properties, along with other properties that are calculated based on those primary values.
For each property in my model, I have implemented getter methods. To ensure that the calculated properties stay up-to-date with the primary properties, I update the primary properties using setter methods that also recompute the calculated values. Here is a simplified snippet of my approach:
export class Model{
private _keyValue: number;
private _computedValue: number;
getKeyValue(): number{
return this._keyValue;
}
setKeyValue(value: number){
this._keyValue = value;
this.evaluateComputedValues(); // This process may take time
}
getComputedValue(): number{
return this._computedValue;
}
}
This methodology ensures the consistency of my model: whenever a primary property is modified, all related calculated properties are updated accordingly.
Now, my goal is to establish bindings between these properties and the component views. I have successfully displayed the computed property values using interpolation like so:
<div>{{model.getComputedValue()}}</div>
Nevertheless, I am uncertain about the optimal approach for binding the primary properties to input fields. The typical examples of two-way binding in Angular 2 utilize ngModel as shown below:
<input [(ngModel)]='model.property'>
However, this method appears to be tailored for simple properties. What I need is two-way binding that leverages my distinct getter and setter methods (getKeyValue and setKeyValue).
Is there a native solution available in Angular 2 to achieve this?