Angular material table sum of array elements - html

Question

As it is my first post here, I would like to say hello to everybody so...
Hello everybody :)
I have a problem with angular and html and I cant find a way to solve it.
Lets say I have 2 interfaces:
export interface Product {
name?: string;
price?: number;}
export interface Meal {
name?: string;
products?: Array<Product>;}
I want to create table like this:
meal name | price
pizza | 10
Where 10 is sum of prices of each product in meal.
Now i cannot find a way to sum those prices in html. Is it possible or should I do it in ts file? Or maybe this shoud be done in java backend and asked with rest? Or maybe should I add "totalPrice" to meal class?
This is my table:
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> meal name </th>
<td mat-cell *matCellDef="let element">
{{element.name}}
</td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef> price </th>
<td mat-cell *matCellDef="let element">
//<ng-container *ngFor="let product of element.products">
//{{product.price}}
//</ng-container>
</td>
</ng-container>

Answer 1

You can accomplish this using the Array.reduce() function.
In your template:
<td mat-cell *matCellDef="let element">
{{calculateMealTotal(element.products)}}
</td>
And in the component file:
calculateMealTotal(products: Product[]): number {
return products.reduce((acc, product) => acc + product.price, 0)
}
This will sum up the total value of all of the products.