title: Angular Material Mat-Table datatable is not rending data from nested objects
body: <p>I am writing an angular material mat-table with a datasource but it is not rending any data</p>
  
  <p>Here is my data type</p>
  
  <pre><code>interface IProfile {
    jobTitle: string;
    startDate: string;
    endDate: string;
  }
  interface IAddress {
    name: string;
    address: string:
    city: string;
    state: string;
    country: string;
    county: string;
    zipcode: string;
  }
  
  interface IEmployee {
    profile: IProfile;
    address: IAddress[];
  }
  
  dataSource : MatTableDataSource&lt;IEmployee &gt;;
  dataSource.data = this.testData;
  
  this.myData: IEmployee[]= [] ;
      this.myData.push = [{ profile: this.testProfileData, address: this.testAddressData}];
  this.datasource.data = this.myData;
  </code></pre>
  
  <p>In intellisense, I see the following content of myData</p>
  
  <p>0: Object { Address: Array(21); Profile: Object }</p>
  
  <p>Everything here is fine. I see the populated profile object and address array in the object after the datasource binding.</p>
  
  <p>In my HTML code</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="mat-elevation-z8" width="100%"&gt;
  
          &lt;ng-container matColumnDef="name" &gt;
            &lt;th mat-header-cell class="table-header" *matHeaderCellDef mat-sort-header&gt;&lt;h3&gt;Address&lt;/h3&gt;&lt;/th&gt;
            &lt;td mat-cell style="width: 15%;" *matCellDef="let myData"&gt;{{myData.address.name}}&lt;/td&gt;
          &lt;/ng-container&gt;
  </code></pre>
  
  <p>When the UI is loading, the table is empty</p>
  
  <p>I tried changing the code to the following since myData is has only 1 record with the profile object and address array</p>
  
  <pre><code>&lt;td mat-cell style="width: 15%;" *matCellDef="let myData"&gt;{{myData.address[0].name}}&lt;/td&gt;
  </code></pre>
  
  <p>But this only shows 1 value on the table. I have not gotten the UI to render all the name values in the array.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>Update: I finally got it to populate. Is this the best approach</p>
  
  <pre><code>    &lt;ng-container matColumnDef="name" &gt;
        &lt;th mat-header-cell class="table-header" *matHeaderCellDef mat-sort-header&gt;&lt;h3&gt;Name&lt;/h3&gt;&lt;/th&gt;
        &lt;div *matCellDef="let myData"&gt;
          &lt;div *ngFor="let metric of myData.address"&gt;
            &lt;td mat-cell style="width: 15%;" &gt;{{address.name}}&lt;/td&gt;
          &lt;/div&gt;
         &lt;/div&gt;
      &lt;/ng-container&gt;
  </code></pre>