How to get a sum of an array column field in an angular array 9.1.9?

Question

I amI am using Angular 9.1.9 and Html. I want to sum or total a nested array field and show in row.

I have a array list ('adherant') with multiple fields. I want to sum of an array columns field {{ Montant total }} and show in a text total like the photo.using Angular 9 and Html. I want to sum of an array columns field {{ Montant total }} and show in a text total like the photo. if there is a pipe methode, or filter !

files

 interface adher { four?: string; mont: number; nombr: number; monmois: number; } const adherant: adher[] = [ { four: 'Russia', mont: 444, nombr: 17075200, monmois: 146989754 }, { four: 'Russasia', mont: 444, nombr: 17075200, monmois: 146989754 },{ four: 'ssss', mont: 444, nombr: 17075200, monmois: 146989754 },{ four: 'Russddddia', mont: 444, nombr: 17075200, monmois: 146989754 },{ four: 'sdsd', mont: 444, nombr: 17075200, monmois: 146989754 },{ four: 'Russcxcxcxia', mont: 444, nombr: 17075200, monmois: 146989754 } ];

 <table class="table table-striped"> <thead> <tr> <th scope="col">Fournisseur</th> <th scope="col">Montant totale</th> <th scope="col">Nombre de mois</th> <th scope="col">Montant par mois</th> </tr> </thead> <tbody> <tr *ngFor="let adh of adherant |filter:search"> <th scope="row">{{ adh.four }}</th> <td> {{ adh.mont }} </td> <td>{{ adh.nombr | number}}</td> <td>{{ adh.monmois | number }}</td> </tr> </tbody> </table>

Answer 1

In component declare:-

public total;

this.total= this.adherant.reduce((prev,next)=>prev+next.mont,0) ;

Use it like {{total}} in template