Angular4 Material data table update table without reloading page

Question

hi I want to update the datatable without reload the page

 dataSource = new UserDataSource(this.userService);
  displayedColumns = ['insertId', 'name', 'email', 'mobile', 'actions'];

this is how i am able to display the data

and i am addding the new data using this api with dialog box

 dialogRef.afterClosed().subscribe(data => {
      console.log(data);
      this.userService.makeRegister(token, data)
        .subscribe(res => { console.log(res); });
    });

now i want to show this new data inside data table without reloading

Answer 1

It's very simple actually :

private updateTableData(data: any[]) {
  this.dataSource = data && data.length ? new MatTableDataSource(data) : new MatTableDataSource([]);
}

Either you create an empty source, or a source with no lines, up to you !