title: mat-table angular 6 not showing any data despite having the dataSource
body: <p>I want to show a list through Angular material design's data table mat-table.
  Here is my component:</p>
  
  <pre><code>import { LeaveapplicationService } from './../../services/leaveapplication.service';
  import { leaveapplication } from './../../models/leaveapplication';
  import { Component, OnInit, ViewChild, Input } from '@angular/core';
  import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
  // import { DataSource } from '@angular/cdk/table';
  
  @Component({
    selector: 'app-leaveapplication-list',
    templateUrl: './leaveapplication-list.component.html',
    styleUrls: ['./leaveapplication-list.component.scss']
  })
  export class LeaveapplicationListComponent implements OnInit {
    leaveApplications: leaveapplication[];
    displayedColumns: ['id', 'applicant', 'manager', 'leavetype', 'start', 'end', 'return', 'status'];
    dataSource: MatTableDataSource&lt;leaveapplication&gt;;
  
    constructor(private leaveApplicationService: LeaveapplicationService) { }
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
  
    ngOnInit() {
      this.leaveApplicationService.getLeaveApplications().subscribe(leaveapplications =&gt; {
        this.leaveApplications = leaveapplications;
        this.dataSource = new MatTableDataSource&lt;leaveapplication&gt;(this.leaveApplications);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        console.log(this.dataSource);
      });
  
    }
  
    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
      this.dataSource.filter = filterValue;
    }
  }
  </code></pre>
  
  <p>The leaveapplication interface:</p>
  
  <pre><code>export interface leaveapplication {
    id: number; 
    applicant: string;
    manager: string;
    startdate: Date;
    enddate: Date;
    returndate: Date;
    leavetype: string; 
    status: string;
  }
  </code></pre>
  
  <p>I am getting the dataSource properly in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/8ELb3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8ELb3.png" alt="enter image description here"></a></p>
  
  <p>But the mat-table return empty cells:</p>
  
  <p><a href="https://i.stack.imgur.com/Qbt1b.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Qbt1b.png" alt="enter image description here"></a></p>
  
  <p>Here is my template:</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
  &lt;/mat-form-field&gt;
  &lt;mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
    &lt;ng-container matColumnDef="id"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Form ID &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.id}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="applicant"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Applicant &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.applicant}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="manager"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Manager &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.manager}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="leavetype"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Leave Type &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.leaveType}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="start"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Start Date &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.startDate | date:'dd-MM-yyyy'}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="end"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; End Date &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.endDate | date:'dd-MM-yyyy'}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="return"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Return Date &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.returnDate | date:'dd-MM-yyyy'}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="status"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Status &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let leaveapplication"&gt; {{leaveapplication.status}} &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;/mat-table&gt;
  
  &lt;mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>Why am I not getting the mat-table populated? Is it because of the asynchronous nature of the response?</p>