title: TypeError: Cannot read property 'dataSource' of undefined table material angular
body: <p>When assigning data to object of MatTableDataSource, getting error <strong>TypeError: Cannot read property 'dataSource' of undefined</strong>. Unable to assign data receive from http source on method call.</p>
  
  <pre><code>import {MatTableDataSource} from '@angular/material';
  </code></pre>
  
  <p>Version:
  angular: 5
  material: 5 </p>
  
  <pre><code>dataSource = new MatTableDataSource();
  getData() {
  this.http.getListData(function(d){
    this.dataSource.data = d;
    }, function (err) {
  
    });
  }
  
  
  &lt;mat-table #table [dataSource]="dataSource"&gt;
  
  
  
  &lt;!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" --&gt;
  
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef="icon"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; No. &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.icon}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Weight Column --&gt;
    &lt;ng-container matColumnDef="hasLoyaltyScheme"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Has Loyalty &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.hasLoyaltyScheme}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Symbol Column --&gt;
    &lt;ng-container matColumnDef="open_now"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Open Now &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.open_now}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
     &lt;/mat-table&gt;
  </code></pre>
  
  <p>Table work when adding static data on ngOnInit() reference from <a href="https://material.angular.io/components/table/examples" rel="nofollow noreferrer">angular table examples</a></p>
  
  <pre><code>const ELEMENT_DATA: Element[] = [
    {icon: 1, name: 'Hydrogen', hasLoyaltyScheme: 1.0079, open_now: 'H'},
    {icon: 2, name: 'Helium', hasLoyaltyScheme: 4.0026, open_now: 'He'},
    {icon: 3, name: 'Lithium', hasLoyaltyScheme: 6.941, open_now: 'Li'},
    {icon: 4, name: 'Beryllium', hasLoyaltyScheme: 9.0122, open_now: 'Be'},
    {icon: 5, name: 'Boron', hasLoyaltyScheme: 10.811, open_now: 'B'},
    {icon: 6, name: 'Carbon', hasLoyaltyScheme: 12.0107, open_now: 'C'},
    {icon: 7, name: 'Nitrogen', hasLoyaltyScheme: 14.0067, open_now: 'N'},
    {icon: 8, name: 'Oxygen', hasLoyaltyScheme: 15.9994, open_now: 'O'},
    {icon: 9, name: 'Fluorine', hasLoyaltyScheme: 18.9984, open_now: 'F'},
    {icon: 10, name: 'Neon', hasLoyaltyScheme: 20.1797, open_now: 'Ne'},
    {icon: 11, name: 'Sodium', hasLoyaltyScheme: 22.9897, open_now: 'Na'},
    {icon: 12, name: 'Magnesium', hasLoyaltyScheme: 24.305, open_now: 'Mg'},
    {icon: 13, name: 'Aluminum', hasLoyaltyScheme: 26.9815, open_now: 'Al'},
    {icon: 14, name: 'Silicon', hasLoyaltyScheme: 28.0855, open_now: 'Si'},
    {icon: 15, name: 'Phosphorus', hasLoyaltyScheme: 30.9738, open_now: 'P'},
    {icon: 16, name: 'Sulfur', hasLoyaltyScheme: 32.065, open_now: 'S'},
    {icon: 17, name: 'Chlorine', hasLoyaltyScheme: 35.453, open_now: 'Cl'},
    {icon: 18, name: 'Argon', hasLoyaltyScheme: 39.948, open_now: 'Ar'},
    {icon: 19, name: 'Potassium', hasLoyaltyScheme: 39.0983, open_now: 'K'},
    {icon: 20, name: 'Calcium', hasLoyaltyScheme: 40.078, open_now: 'Ca'},
  ];
  
  
  ngOnInit() {
      this.dataSource.data = ELEMENT_DATA;
    }
  </code></pre>