CODEWITHSUNDEEP
angulartypescript
J.Olufsen
J.Olufsen

Reputation: 13915

Implement change detection on plain input elements to run function that updates final result

There are up to 12 inputs. Essentially those are the same entities/ objects but with different values. Their integer values directly linked to the resulting value that is shown to a user. As soon as any of the inputs change, there is need to run a function that will update result. Some suggest hooks OnChanges(), others DoCheck() and @Input. In my case, there is no inheritance between inputs so @Input decorator is unnecessary complexity.... What would be the right way to implement it?

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)
}

Upvotes: 1

Views: 22

Answers (1)

Harry Ninh
Harry Ninh

Reputation: 16758

How about

 <input type="number" [(ngModel)]="a.x" (ngModelChange)="updateResult()">
 <input type="number" [(ngModel)]="a.y" (ngModelChange)="updateResult()">
 <input type="number" [(ngModel)]="a.z" (ngModelChange)="updateResult()">
 <input type="number" [(ngModel)]="b.x" (ngModelChange)="updateResult()">
 <input type="number" [(ngModel)]="b.y" (ngModelChange)="updateResult()">
 <input type="number" [(ngModel)]="b.z" (ngModelChange)="updateResult()">

Upvotes: 1

Related Questions