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