Reputation: 815
Below one is just sample. I need to multiple calculations dynamically.
Total value is not updating if I change values in units/price text boxes. How can I calculate using ngModel? Should we use valueChange event? Angular 4 don't update automatically?
JSON:
items:[{units:10;price:20, total:0},
{units:20;price:23, total:0}]
Controller:
pageLoad(){
for(var i=0; i<items.length; i++){
items[i].total = items[i].units*items[i].price
}
}
HTML:
<div *ngFor="let item of items; let i=index">
<kendo-numerictextbox [(ngModel)]="item.units" />
<kendo-numerictextbox [(ngModel)]="item.price" />
<kendo-numerictextbox [readOnly]="true" [(ngModel)]="item.total" />
</div>
Upvotes: 0
Views: 1723
Reputation: 10469
Here is working Plunkr.
Code:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div *ngFor="let item of items; let i=index">
<div>{{item | json}}</div>
<div>
<kendo-numerictextbox [(ngModel)]="item.units"></kendo-numerictextbox>
<kendo-numerictextbox [(ngModel)]="item.price"></kendo-numerictextbox>
<kendo-numerictextbox [readonly]="true" [value]="getTotal(item)"></kendo-numerictextbox>
</div>
</div>
`
})
export class AppComponent
{
public items = [{units:10,price:20},{units:20,price:23}];
public getTotal(item)
{
return item.units*item.price;
}
}
Upvotes: 1