Angular2: assign component field within #ngFor - html

Question

I have such component:
#Component({
selector: "expenses-component",
templateUrl: "expenses.html"
})
export default class ExpensesComponent {
private expenses: [] = [{name: "Foo", amount: 100}, {name: "Bar", amount: 200}];
private totalAmount: number = 0;
}
and also such template:
<h2 class="sub-header">Total: {{total | currency:"USD":true}}</h2>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let expense of expenses | orderByDate; let id = index">
<td>{{id + 1}}</td>
<td>{{expense.name}}</td>
<td>{{expense.amount | currency:"USD":true}}</td>
</tr>
</tbody>
</table>
</div>
I need to count totalAmount, but i can't figure out how to do it without providing another one for loop in typescript code, so is there possibility to initialize total += expense.amount within the above #ngFor loop?

Answer 1

As far as I know, it is not possible. You can achieve it by creating custom pipe which will iterate through the array and return totalAmount. As the parameter you can pass the name of the key which you want to use as value.
For the example:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'totalAmount'
})
export class totalAmount implements PipeTransform {
transform(value:any, key:string):any {
if(value){
let total = 0;
for(let i in value){
total = total + value[i][key];
}
return total;
}
return value;
}}
And then you can call it from html:
<div>{{expenses | totalAmount:"amount"}}</div>

Answer 2

You could make totalAmount a get() method and return it there?
private get totalAmount() {
let total = 0;
for (let item in this.expenses) {
total += item.amount;
}
return total;
}