title: data from websockets to Angular mat table
body: <p>I have been writing a code to get data from my server via websockets and display it in Angular mat-table. I am having issues as the table data is not refreshing. I am able to display the data in a simple table. But the same is not getting displayed in a mat-table. In one of the blogs, i read to use _updateChangeSubscription / _renderChangesSubscription but nothing works. I even tried using @ViewChild component to trigger the data refresh. Even that is not working. 
  below are my app.compnent.html and app.component.ts for reference</p>
  
  <p>app.component.html</p>
  
  <pre><code> &lt;!-- Simple table where data is getting displayed--&gt;
      &lt;div&gt;
        &lt;table border="10"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt; Id&lt;/th&gt;
              &lt;th&gt; Name&lt;/th&gt;
              &lt;th&gt; Output &lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let data of result"&gt;
              &lt;th&gt;{{ data.id }}&lt;/th&gt;
              &lt;td&gt;{{ data.name }}&lt;/td&gt;
              &lt;td&gt;{{ data.output }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  
  &lt;!-- mat-table where data is not getting displayed --&gt;
  
      &lt;mat-table [dataSource]="datasource"&gt;
      &lt;ng-container matColumnDef="id"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; id. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{ element.id }}  &lt;/mat-cell&gt;
      &lt;/ng-container&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;ng-container matColumnDef="output"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Output &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;  {{ element.output }}  &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>app.component.ts</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.styl']
  })
  export class AppComponent {
    title = 'web socket example';
    private serverUrl = 'http://localhost:8080/server'
    private stompClient;
    @ViewChild(MatTable) table : MatTable&lt;any&gt;;
  
  
    result = [];
    displayedColumns: string[] = ['id', 'name', 'output'];
    datasource : MatTableDataSource&lt;Element[]&gt;;
  
  
  
    constructor(){
      this.initializeWebSocketConnection();
    }
  
  
   stompSucessCallBack = () =&gt;  {
  
     this.stompClient.subscribe("/messages", (message) =&gt; {
      if(message.body) {      
  
      this.result.push(JSON.parse(message.body)); 
      this.datasource.data.push(message.body); 
      this.datasource._updateChangeSubscription;
  
      this.datasource._renderChangesSubscription;
      this.table.renderRows;
      console.log("******");
      console.trace(this.datasource.data);
  
    }
  });
   }
  
  
    initializeWebSocketConnection(){
      let ws = new SockJS(this.serverUrl);
      this.stompClient = Stomp.over(ws);
  
      this.datasource = new MatTableDataSource();
      let that = this;
      this.stompClient.connect({}, that.stompSucessCallBack);
    }
  
  }
  </code></pre>
  
  <p>packge.json</p>
  
  <pre><code>"dependencies": {
      "-": "0.0.1",
      "@angular/animations": "~9.1.7",
      "@angular/cdk": "^9.2.4",
      "@angular/common": "~9.1.7",
      "@angular/compiler": "~9.1.7",
      "@angular/core": "~9.1.7",
      "@angular/forms": "~9.1.7",
      "@angular/material": "^9.2.4",
      "@angular/platform-browser": "~9.1.7",
      "@angular/platform-browser-dynamic": "~9.1.7",
      "@angular/router": "~9.1.7",
      "jquery": "^3.5.1",
      "net": "^1.0.2",
      "rxjs": "~6.5.4",
      "sockjs-client": "^1.4.0",
      "stompjs": "^2.3.3",
      "tslib": "^1.10.0",
      "zone.js": "~0.10.2"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.901.6",
      "@angular/cli": "~9.1.6",
      "@angular/compiler-cli": "~9.1.7",
      "@types/node": "^12.11.1",
      "@types/jasmine": "~3.5.0",
      "@types/jasminewd2": "~2.0.3",
      "codelyzer": "^5.1.2",
      "jasmine-core": "~3.5.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~5.0.0",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage-istanbul-reporter": "~2.1.0",
      "karma-jasmine": "~3.0.1",
      "karma-jasmine-html-reporter": "^1.4.2",
      "protractor": "~5.4.3",
      "ts-node": "~8.3.0",
      "tslint": "~6.1.0",
      "typescript": "~3.8.3"
    }
  </code></pre>