title: How to add data dynamically to mat-table dataSource?
body: <p>I have data streaming from backend and i see it printing in console now i am trying to push event to <code>dataSource</code> its throwing error dataSource is not defined. Can someone help how to dynamically add data to materialize table ?</p>
  
  <p>stream.component.html</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource"&gt;&lt;/mat-table&gt;
  </code></pre>
  
  <p>stream.component.ts</p>
  
  <pre><code>import {
      Component,
      OnInit
  } from '@angular/core';
  import {
      StreamService
  } from '../stream.service';
  import {
      MatTableDataSource
  } from '@angular/material';
  import * as io from 'socket.io-client';
  
  @Component({
      selector: 'app-stream',
      templateUrl: './stream.component.html',
      styleUrls: ['./stream.component.css']
  })
  export class StreamComponent implements OnInit {
      displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
      dataSource: MatTableDataSource &lt; Element[] &gt; ;
      socket = io();
  
      constructor(private streamService: StreamService) {};
  
      ngOnInit() {
          this.streamService.getAllStream().subscribe(stream =&gt; {
              this.dataSource = new MatTableDataSource(stream);
          });
          this.socket.on('newMessage', function(event) {
              console.log('Datasource', event);
              this.dataSource.MatTableDataSource.filteredData.push(event);
          });
      }
  }
  
  
  export interface Element {
      ticketNum: number;
      ticketOpened: number;
      eventType: string;
      riskIndex: string;
      riskValue: number;
      severity: string;
      lastModifiedDate: number;
      assetID: string;
  }
  </code></pre>