how to sum up total in angular?

Question

I want to sum the column of a table in angular but it does not work: for example if I want to sum the 2000 and 3000 and 4000 it gives me 200030004000, but I want to sum it means 9000, it is concatenation.

client.component.ts

clients: Client[];
total: number=0;

constructor(private clientService:ClientService) { }

ngOnInit() {
    this.clientService.getClients().subscribe(clients => {
        this.clients=clients;
        this.total = this.getTotal();
    });
}

getTotal() {
    return this.clients.reduce((total, client) => {
        return total + client.balance;
    }, 0)
}

client.component.html

<div class="col-md-6">
    <h4 class="text-right">Total : {{ total | currency:"USD": "symbol" }}</h4>
</div>

Answer 1

You can try this: Because the balance you are getting is in string maybe

getTotal() {
    return this.clients.reduce((total, client) => {
      return total + parseInt(cliient.balance);
    }, 0)
}

Answer 2

Try:

...
return total + Number(client.balance);
...