There are a maximum of 12 inputs that represent the same entities or objects but with varying integer values. These values directly impact the final result displayed to the user. Whenever any of the input values change, a function needs to be triggered to update the result. Some developers recommend using hooks such as OnChanges() or DoCheck(), while others opt for @Input. However, in this scenario where there is no inheritance between inputs, using the @Input decorator would only add unnecessary complexity.... What would be the most suitable approach to implement this?
For example:
<input type="number" [(ngModel)]="a.x">
<input type="number" [(ngModel)]="a.y">
<input type="number" [(ngModel)]="a.z">
<input type="number" [(ngModel)]="b.x">
<input type="number" [(ngModel)]="b.y">
<input type="number" [(ngModel)]="b.z">
Result: {{result}}
updateResult() {
result = a.x+a.y+a.z-(b.x+b.y+b.z)
}