angular4 kendo-numerictextbox ngModel two way data binding

Question

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>

Makla · Accepted Answer · 2018-04-10 05:10:30Z

1

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

answered Apr 10, 2018 at 5:10

Makla

10.6k19 gold badges81 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular4 kendo-numerictextbox ngModel two way data binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related