title: In angular 7 , How do I populate a mat-table with a data from an object
body: <p>Currently I have the following code to populate a table.</p>
  
  <p><strong>In component.ts:</strong></p>
  
  <pre><code>import { HttpClient } from "@angular/common/http";
  import { Component, OnInit } from "@angular/core";
  import { FormBuilder, FormGroup, Validators } from "@angular/forms";
  import { ActivatedRoute, Router } from "@angular/router";
  import { MatTableDataSource } from "@angular/material/table";
  
  @Component({
    styleUrls: ["./styles.scss"],
    templateUrl: "./template.html"
  })
  export class MyRouteData {
    employeeInfoTable: object;
  
    constructor(private http: HttpClient) {}
  
    ngOnInit() {
      this.http
        .get("http://localhost:5000/MyRoute/GetEmployeeInfo")
        .subscribe(response =&gt; {
          this.employeeInfoTable = response;
        });
    }
  }
  </code></pre>
  
  <p><strong>My template.html file looks like this:</strong></p>
  
  <pre><code>&lt;mat-card style="height: 98%"&gt;
    &lt;div style="height: 95%; overflow: auto;"&gt;
        &lt;table class="MyNiceStyle"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;td&gt;Name&lt;/td&gt;
              &lt;td&gt;Age&lt;/td&gt;
              &lt;td&gt;Date Of Birth&lt;/td&gt;
              &lt;td&gt;Address&lt;/td&gt;
              &lt;td&gt;Postcode&lt;/td&gt;
              &lt;td&gt;Gender&lt;/td&gt;
              &lt;td&gt;Salary&lt;/td&gt;
              &lt;td&gt;Job Title&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tr *ngFor="let data of employeeInfoTable"&gt;
            &lt;td&gt;{{data.Name}}&lt;/td&gt;
            &lt;td&gt;{{data.Age}}&lt;/td&gt;
            &lt;td&gt;{{data.DateOfBirth}}&lt;/td&gt;
            &lt;td&gt;{{data.Address}}&lt;/td&gt;
            &lt;td&gt;{{data.Postcode}}&lt;/td&gt;
            &lt;td&gt;{{data.Gender}}&lt;/td&gt;
            &lt;td&gt;{{data.Salary}}&lt;/td&gt;
            &lt;td&gt;{{data.JobTitle}}&lt;/td&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>which works but honestly, it looks terrible. What I would like to do is to use 
  a mat-table: <a href="https://material.angular.io/components/table/examples" rel="nofollow noreferrer">https://material.angular.io/components/table/examples</a></p>
  
  <p>I've updated the template.html to:</p>
  
  <pre><code>&lt;mat-card style="height: 98%"&gt;
      &lt;table mat-table [dataSource]="employeeInfoTable" class="mat-elevation-z8"&gt;
          &lt;ng-container matColumnDef="Name"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;Name &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.Name}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="DateOfBirth"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; DateOfBirth &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.DateOfBirth}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="Address"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Address &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.Address}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="Postcode"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Postcode &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.Postcode}} &lt;/td&gt;
  
          &lt;ng-container matColumnDef="Gender"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Gender &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.Gender}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="Salary"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Salary &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.Salary}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="JobTitle"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; JobTitle &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.JobTitle}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>and when I run this I just see a blank screen. There are no console errors or anything like that. What changes do I need to make to template.html and/or <code>component.ts</code> to get the data to show?</p>