title: Angular Material Table not displaying data
body: <p>What am I missing?  I verified that my API is returning data back however I can't get the data to display in my table.</p>
  
  <p>Verified data:</p>
  
  <pre><code>&lt;pre&gt;{{ myData| json }}&lt;/pre&gt;
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;div *ngIf="dataSource"&gt;
    &lt;mat-table [dataSource]='dataSource'&gt;
      &lt;ng-container matColumnDef="name"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let df"&gt; {{df.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="path"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Path &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let df"&gt; {{df.path}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="columnsToDisplay"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let df; columns: columnsToDisplay"&gt;&lt;/mat-row&gt;
  
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Typescript:</p>
  
  <pre><code>export class HomeComponent implements OnInit {
    columnsToDisplay = ['name', 'path'];
    myData: IMyData[];
    dataSource = new MatTableDataSource&lt;IMyData&gt;(this.myData);
  
    constructor(private myDataService: MyDataService) { 
      console.log("IN CONSTRUCTOR");
    }
  
    ngOnInit(): void {
      this.myDataService.getData()
      .subscribe(x =&gt; this.myData = x,
        error =&gt; console.log("Error (GetData) :: " + error)
      ); } 
  }
  </code></pre>
  
  <p>EDIT: I wonder if it has to do with my interface:</p>
  
  <p>Interface</p>
  
  <pre><code>export interface IMyData {
    id: string;
    path: string;
    date: Date;
    location: Geolocation;
    name: string;
    gizmos: string[];
  }
  </code></pre>
  
  <p>Example Data:</p>
  
  <pre><code>[
    {
      "id": "9653a6b5-46d2-4941-8064-128c970c60b3",
      "path": "TestPath",
      "date": "2018-04-04T08:12:27.8366667",
      "location": "{\"type\":\"Point\",\"coordinates\":[102.0,0.5]}",
      "name": "TestName",
      "gizmos": [
        "AAAA",
        "BBBB",
        "CCCC"
      ]
    }
  ]
  </code></pre>