Angular 2: Calculate sum of an element in ngFor

Question

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

HTML

Answer 1

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:

{{list.reduce((acc,val) => acc + val.amount, 0)}}

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.