How to bind data to mat-table dataSource using angular4?

Question

I have a material data table that i am trying to set dataSource dynamically but it throws error dataSource undefined, I am new to angular2 please help me to understand if below code has some issue.

stream.component.html

<mat-table #table [dataSource]="dataSource">
   <mat-table #table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="ticketNum">
    <mat-header-cell *matHeaderCellDef> Ticket Number </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.ticketNum}} </mat-cell>
  </ng-container>

stream.component.ts

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 < Element[] > ;
    socket = io();

    constructor(private streamService: StreamService) {};

    ngOnInit() {
        this.streamService.getAllStream().subscribe(stream => {
            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;
}

El houcine bougarfaoui · Accepted Answer · 2017-12-01 17:29:10Z

1

I think that this.socket.on('newMessage' event is fired before this.streamService.getAllStream() resolves, so have to wait until the dataSource is instantiated :

  this.streamService.getAllStream().subscribe(stream => {
        this.dataSource = new MatTableDataSource(stream);
        this.socket.on('newMessage', (event) => {  // <-- here
          console.log('Datasource', event);
           this.dataSource.data.push(event);
           this.dataSource.data = [...this.dataSource.data]
        });
    });
}

edited Dec 1, 2017 at 17:29

answered Dec 1, 2017 at 15:25

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

hussain Over a year ago

ok i tried that and this.dataSource.filteredData is printing outside socket but when i do `this.dataSource.filteredData.push(event) inside socket function its throwing error filteredData is not defined, Any idea ?

El houcine bougarfaoui Over a year ago

Sorry. see the update, use arrow function => instead of function

hussain Over a year ago

ok making progress thanks for helping here i see new event is added to filteredData but binding is still not happening to the view it should update the view

El houcine bougarfaoui Over a year ago

see the update , use data instead of filteredData @hussain

hussain Over a year ago

sorry to keep asking questions, its same pushing data to array but binding is not happening for some reason. added more html

|

Collectives™ on Stack Overflow

How to bind data to mat-table dataSource using angular4?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related