title: MatTableDataSource Cannot read property 'data' of undefined in Angular 7
body: <p>I am trying to implement <code>MatTableDataSource</code> in Angular 7, I am following <a href="https://material.angular.io/components/table/overview" rel="nofollow noreferrer">Angular Material</a> guideline, but it seems it doesn't work and I am getting `</p>
  
  <blockquote>
    <p>Cannot read property 'data' of undefined</p>
  </blockquote>
  
  <p>`. When printing in console, the data is bound and the results are shown, but it is not bound to my table.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="mat-elevation-z8 full-width-table" *ngIf="brList"&gt;
  &lt;table class="full-width-table" mat-table [dataSource]="brList" matSort aria-label="Elements"&gt;
    &lt;!-- Id Column --&gt;
    &lt;ng-container matColumnDef="id"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Id&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt;{{row.id}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt;{{row.name}}&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-paginator #paginator
      [length]="dataSource.data.length"
      [pageIndex]="0"
      [pageSize]="10"
      [pageSizeOptions]="[10, 15, 20, 25]"&gt;
  &lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Model </p>
  
  <pre><code>export interface Br {
      id: number;
      name: string;
  }
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>export class ListBComponent implements OnInit {
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    brList: MatTableDataSource&lt;Br&gt; = new MatTableDataSource&lt;Br&gt;();
    displayedColumns = ['id', 'name'];
    constructor(private mm: BrService){
  
    }
    ngOnInit() {
      this.mm.getMM().subscribe(
        result =&gt;
        {
           this.brList.data = result;
           this.brList.paginator = this.paginator;
           this.brList.sort = this.sort;
           console.log(this.brList); //prints the data correctly
        })
    }
  </code></pre>