angular 2 how to sum column ngFor

Question

trying to understand how to sum the column from table, every is added with *ngFor ( like todo-list), i wanna sum one of column, how i can do it in angular 2 ? So i have table

Answer 1

You would have to create a getSum(index: number): number method in your Angular 2 Component class, something like this:

getSum(index: number) : number {
  let sum = 0;
  for(let i = 0; i < this.items.length; i++) {
    sum += this.items[i][index];
  }
  return sum;
}

and in your html, replace your SUMX by:

{{ getSum(0) }} {{ getSum(1) }} ...

And you could of course also use a ngFor to create the multiple td tags if needed.

[EDIT]: to have the exact code you need based on your fiddle:

  getSum(column) : number {
    let sum = 0;
    for(let i = 0; i < this.list.length; i++) {
      sum += this.list[i][column];
    }
    return sum;
  }

and in html:

{{ getSum('newInput') }}{{ getSum('newOutput') }}

[EDIT 2]: just for completeness, you can also do the sum of an array using the reduce function rather than using a loop in the getSum method:

var sum = this.items[i]['myfield'].reduce(function(x, y) { return x + y; }, 0);