I am using Angular 8 and material data table with different filters as in this example This is placed inside a component to which I navigate through router-outlet with one minor difference, I initialize the dataSource in ngAfterViewInit and assign data from API to this.dataSource.data at the end of the block to achieve fastest performance as advised here
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.dataSource.filterPredicate = (record, filter: any) => {
let result = true;
let keys = Object.keys(record); // keys of the object data
for (const key of keys) {
let searchCondition = filter.conditions[key]; // get search filter method
if (searchCondition && searchCondition !== 'none') {
if (filter.methods[searchCondition](record[key], filter.values[key]) === false) { // invoke search filter
result = false // if one of the filters method not succeed the row will be remove from the filter result
break;
}
}
}
return result
};
this.apiService.getLogsNested().subscribe(logsFromApi => {
this.dataSource.data = logsFromApi;
this.isLoadingResults = false;
});
console.log('logs ngAfterViewInit');
}
The issue is that when I filter something in the component with data table and then switch between different routes/components each time I go back to my component with data table I don't see the filtered results as it is getting re-initialized when switching between routes. I confirmed ngAfterViewInit is getting called in such event. Can I somehow preserve the state of component dataTable when switching between the routes ?
