CODEWITHSUNDEEP
angular5kendo-ui-angular2angular2-ngmodel
user3194721
user3194721

Reputation: 815

angular4 kendo-numerictextbox ngModel two way data binding

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

Answers (1)

Makla
Makla

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

Related Questions