The correct method of updating a MatTableDataSource in Angular 2 version 6

I have a listing that uses the mat-table component which is fed by the MatTableDataSource.

in the component.html

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


in the component.ts

dataSource = new MatTableDataSource();


when I click to delete an item, on the success callback from the server, I update the list to reflect the new result set by reinstantiating the MatTableDataSource(this.resources) and pass in the new result set like so. This does work...

this.PHService.getResources().subscribe(resources => {
this.resources = resources;
this.dataSource = new MatTableDataSource(this.resources);
this.dataSource.sort = this.sort;
});


However, even though this works, I feel this is wrong.

I have read some articles that state I have to extend the datasource? and call the renderRows() method? I have tried this and I cannot seem to get it to work in my scenario.

I know it's a lack of understanding on my behalf.

Continue reading...