graphql-pizza-demo/frontend/src/app/pizza-list-with-topping/pizza-list-with-topping.component.html

<div class="container">
  <mat-toolbar>
    <mat-toolbar-row>
      <h1>Pizzas With topping</h1>
    </mat-toolbar-row>
  </mat-toolbar>

  <table mat-table [dataSource]="pizzas">
    <ng-container matColumnDef="id">
      <th class="id" mat-header-cell *matHeaderCellDef>ID</th>
      <td class="id" mat-cell *matCellDef="let pizza; let i = index">
        {{ pizza.id }}
      </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th class="name" mat-header-cell *matHeaderCellDef>Name</th>
      <td class="name" mat-cell *matCellDef="let pizza; let i = index">
        {{ pizza.name }}
      </td>
    </ng-container>

    <ng-container matColumnDef="toppings">
      <th class="toppings" mat-header-cell *matHeaderCellDef>Name</th>
      <td class="toppings" mat-cell *matCellDef="let pizza; let i = index">
        {{ getToppingListString(pizza.toppings) }}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <ng-template #nopizzaSelected>
    no pizza selected, please select a pizza to see events!
  </ng-template>
</div>