info-viplist-page.component.html

<mat-table  #table [dataSource]="vips | async">
  <ng-container matColumnDef="host">
    <mat-header-cell *matHeaderCellDef translate >vip.host </mat-header-cell>
    <mat-cell *matCellDef="let v" > {{v.host.firstname}} {{ v.host.lastname}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="shortdescr">
    <mat-header-cell *matHeaderCellDef translate >vip.shortdescr </mat-header-cell>
    <mat-cell *matCellDef="let v"> {{v.shortdescr}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef translate > vip.description </mat-header-cell>
    <mat-cell *matCellDef="let v"> {{v.description}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="products">
    <mat-header-cell *matHeaderCellDef translate > vip.products </mat-header-cell>
    <mat-cell *matCellDef="let v">
      <div *ngFor="let p of v.products" class="row">
        <div style="display: inline-block;">{{p.name}}</div>
        <div style="display: inline-block;">{{p.quantity}}</div>
        <div style="display: inline-block; flex: 1;"> </div>
      </div>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>