title: Displaying nested array with mat-table
body: <p>I'm working with an object which has a nested array, something like this</p>
  <p>The Foo_Chain.Foo needs to be shown in different columns</p>
  <p>ClientId | Foo_Type | Foo 1 | Foo 2</p>
  <p>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</p>
  <pre><code>[
     {
        &quot;clientId&quot;:&quot;44&quot;,
        &quot;Foo_Type&quot;:&quot;XYZ&quot;,
        &quot;Foo_Chain&quot;:[
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;XYZ 1&quot;
           },
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;XYZ 2&quot;
           }
        ]
     },
     {
        &quot;clientId&quot;:&quot;44&quot;,
        &quot;Foo_Type&quot;:&quot;ABC&quot;,
        &quot;Foo_Chain&quot;:[
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;ABC 1&quot;
           },
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;ABC 2&quot;
           }
        ]
     },
     {
        &quot;clientId&quot;:&quot;44&quot;,
        &quot;Foo_Type&quot;:&quot;ASR&quot;,
        &quot;Foo_Chain&quot;:[
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;ASR 1&quot;
           },
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;ASR 2&quot;
           }
        ]
     },
     {
        &quot;clientId&quot;:&quot;44&quot;,
        &quot;Foo_Type&quot;:&quot;LOP&quot;,
        &quot;Foo_Chain&quot;:[
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;LOP 1&quot;
           },
           {
              &quot;Imported&quot;:true,
              &quot;Foo&quot;:&quot;LOP 2&quot;
           }
        ]
     }
  </code></pre>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot;&gt;
            &lt;ng-container matColumnDef=&quot;clientId&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{'ClientId' | uppercase}} &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot; class=&quot;data-column&quot;&gt;
                {{element.clientID}}
              &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef=&quot;fooType&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{'Foo_Type' | uppercase}} &lt;/th&gt;
              &lt;div fxLayout=&quot;row&quot;&gt;
                &lt;td mat-cell *matCellDef=&quot;let element&quot; class=&quot;data-column&quot;&gt;
                  {{element.foo_Type}}
                &lt;/td&gt;
              &lt;/div&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef=&quot;footype1&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{'Foo_Type 1' | uppercase}} &lt;/th&gt;
              &lt;div fxLayout=&quot;row&quot;&gt;
                &lt;td mat-cell *matCellDef=&quot;let element&quot; class=&quot;data-column&quot;&gt;
                {{element.FooChain.Foo[0]}}
                &lt;/td&gt;
              &lt;/div&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef=&quot;servtype2&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{'Serv_Type' | uppercase}} &lt;/th&gt;
              &lt;div fxLayout=&quot;row&quot;&gt;
                &lt;td mat-cell *matCellDef=&quot;let element&quot; class=&quot;data-column&quot;&gt;
                {{element.FooChain.Foo[1]}}
                &lt;/td&gt;
              &lt;/div&gt;
            &lt;/ng-container&gt;
            &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns sticky: true&quot;&gt;&lt;/tr&gt;
            &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>