Displaying nested array with mat-table

Question

I'm working with an object which has a nested array, something like this

The Foo_Chain.Foo needs to be shown in different columns

ClientId | Foo_Type | Foo 1 | Foo 2

Foo_Type isn't being a problem, because I can access it easily, but the other 2 properties, belongs to Foo_Chain the nested array, and I'm having issues trying to display it

[
   {
      "clientId":"44",
      "Foo_Type":"XYZ",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"XYZ 1"
         },
         {
            "Imported":true,
            "Foo":"XYZ 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"ABC",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"ABC 1"
         },
         {
            "Imported":true,
            "Foo":"ABC 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"ASR",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"ASR 1"
         },
         {
            "Imported":true,
            "Foo":"ASR 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"LOP",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"LOP 1"
         },
         {
            "Imported":true,
            "Foo":"LOP 2"
         }
      ]
   }

<table mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="clientId">
            <th mat-header-cell *matHeaderCellDef> {{'ClientId' | uppercase}} </th>
            <td mat-cell *matCellDef="let element" class="data-column">
              {{element.clientID}}
            </td>
          </ng-container>
          <ng-container matColumnDef="fooType">
            <th mat-header-cell *matHeaderCellDef> {{'Foo_Type' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
                {{element.foo_Type}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="footype1">
            <th mat-header-cell *matHeaderCellDef> {{'Foo_Type 1' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{element.FooChain.Foo[0]}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="servtype2">
            <th mat-header-cell *matHeaderCellDef> {{'Serv_Type' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{element.FooChain.Foo[1]}}
              </td>
            </div>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Answer 1

If it is fixed, always 2 FOO. You can do something like this.

 {{element.FooChain[0].Foo}}

{{element.FooChain[1].Foo}}

However, i'm not sure you can sort and filter by those properties in case you need it. If the number vary, you have to implement ng-for.

 <mat-cell *matCellDef="let element">
        <div>
          <ng-container  *ngFor="let item of element?.FooChain">
            <div >
                <span>{{item.Foo}}</span>
            </div>
          </ng-container>
        </div>
    </mat-cell>