Angular 2: Calculate sum of an element in ngFor

Question

I am trying to calculate the total (sum of amounts) outside the ngFor.

HTML

 <div *ngFor="let item of items">
    <input type="text" [(ngModel)]="item.price">  
    <input type="text" [(ngModel)]="item.quantity" (ngModelChange)="item.amount=item.quantity*item.price">
    <input type="text" [(ngModel)]="item.amount">    
</div>
<input type="text" [(ngModel)]="totalAmount">

Scripe

getTotal() {
    let total = 0;
    for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].amount) {
            total += this.items[i].amount;
            this.totalamount = total;
        }
    }
    return total;
}

When I call the getTotal() function it returns total. But,how can I call that in textbox? or any other methods.

Can any one help me how to solve this.

Calc the sum in the model (items) instead and bind to the result. — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 3, 2016 at 9:32
Thanks for reply. I am adding items dynamically from UI. So, I am not able to calculate. — Nagarjuna Reddy
– Nagarjuna Reddy, Commented Oct 3, 2016 at 9:35

Nico · Accepted Answer · 2016-10-03 16:53:18Z

3

You can always bind to the function on your template by using the one-way bind {{ }}

In your code if you wanted to call your function and bind it directly to your view you would do such:

<input type="text" value='{{ getTotal() }}' />

answered Oct 3, 2016 at 16:53

Nico

2,0211 gold badge19 silver badges20 bronze badges

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

Comments

Alex · Accepted Answer · 2017-04-10 08:39:15Z

2

I think Angular need something more intrinsic to achieve this. The {{items}} above is simply an array and things are simple. If it were an observable, then you'll be subscribing to it in the template and in the class. If the observable is filtered in the ngFor, then you need to repeat the filtering in the class method.

The best that I can come up with is a pipe:

<div *ngFor="let item of items$ | async as list">
</div>
<div>{{list.reduce((acc,val) => acc + val.amount, 0)}}</div>

I can't imagine why you should want to bind the computed sum to an input field, so I just displayed the value here.

Unfortunately, it still means looping the list twice.

answered Apr 10, 2017 at 8:39

Alex

4178 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular 2: Calculate sum of an element in ngFor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related