Сумма элементов массива таблицы материалов Angular

Поскольку это мой первый пост здесь, я хотел бы поздороваться со всеми, так что...

Привет всем :)

У меня проблема с angular и html, и я не могу найти способ ее решить. Допустим, у меня есть 2 интерфейса:

export interface Product {
    name?: string;
    price?: number;}

export interface Meal {
    name?: string;
    products?: Array<Product>;}

Я хочу создать таблицу следующим образом:

meal name | price
pizza     | 10    

Где 10 - сумма цен каждого продукта в еде.

Теперь я не могу найти способ суммировать эти цены в html. Возможно ли это или я должен сделать это в файле ts? Или, может быть, это нужно сделать в java-бэкэнде и спросить с остальными? Или, может быть, я должен добавить «totalPrice» к классу еды?

Это моя таблица:

    <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>