How to sum numbers in table angular

Question

I would like to sum these numbers in my table:

Do I make a filter or ngFor is needed ? I know that the calculation does not make sense. I tried:

  <th>
    <i>Sum:{{ this.invoices?.sum | number }}</i>
 </th>

ts:

 invoices: any;

  calcSum = ( invoice: any, sum:number): string => {
        if (!invoice||!sum) { 
            return '0';
        }
        return (this.invoices.sum + this.invoices.sum); 
        
    }

interface:

export interface InvoiceResponse{
    paid: boolean,
    paidAmount: number,
    client: string,
    number: number,
    total:number,
    taxTotal: number,
    sum: number,
    currencyRate: string,
    currencyRateAtIssueDate: string,
    issuedAtPlace: string,
    issuedAt: string,
    deadlineAt: string

}

Answer 1

ts

calcSum = this.invoices.map((i) => i.sum).reduce((a, b) => a + b);

html

<th>
  <i>Sum:{{ calcSum  }}</i>
</th>

snippet

const invoices = [{sum:1}, {sum:2}, {sum:3}];

const calcSum = invoices.map((i) => i.sum).reduce((a, b) => a + b);

console.log(calcSum);

further information and some examples can be found in the following article:

• Better way to sum a property value in an array