viplist.component.html

<mat-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="host">
    <mat-header-cell *matHeaderCellDef translate> vip.shortdescr </mat-header-cell>
    <mat-cell *matCellDef="let v"> {{v.shortdescr}} </mat-cell>
  </ng-container>

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

  <ng-container matColumnDef="host">
    <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-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>