Update mat-table contents by changing .filteredData property

Question

UPDATE: $scope.$apply(); seems to be the right approach, but I'm using Angular6... how would I implement the same feature?

I'm currently trying to update a table in a particular way. I do not wish to achieve this via the .filter property, custom pipes, etc, rather, I want to directly assign the data I wish to display to a property of the dataSource.

I've tried assigning dataSource.filteredData to data that I wish to display. However, even though dataSource.filteredData updates, the table fails to reflect such changes.

Am I changing the correct variable? How would I update viewable table contents by directly editing a property of the dataSource, i.e. through .filteredData?

Hope this makes sense, if not, please ask!

Answer 1

If the question is on angularjs, i recommend you to use $scope.$apply() This will force an update of the watches and a digest cycle.

Once you set the data to dataSource.filteredData call $scope.$apply();

EDIT:

Since you are using angular with typescript, you can do the same with detectChanges()

once you assign the data just call,

chRef.detectChanges(); 

You can read my answer here

Answer 2

From what I've searched the equivalent to $scope.$apply() in Angular 2+ is doing it like this:

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){
}

Then use:

chRef.detectChanges(); // whenever you need to force update view

after you set the data with dataSource.filteredData.