Trigger Angular MatDataSource filter manually

Question

I got a search input and a select dropdown that shows predefined filters. To realize the filter I extended the Angular MatDataSource filter predicate with a custom filter:

this.invitationsDataSource.filterPredicate = (d: InvitationsApi, x: string) => {
  return this.recursiveSearch(d, x) && this.handleFilter(this.filterControl.value, d);
};

Now I subscribe to valueChanges of the search input and the filter select dropdown to filter data correctly:

this.searchControl.valueChanges.pipe(
    map(query => query.trim().toLowerCase()),
    map(query => this.invitationsDataSource.filter = query)
).subscribe();

and for the filter select dropdown:

this.filterControl.valueChanges.pipe(
).subscribe();

How can I trigger the filter now? The problem is that the filter should be also triggered when the searchControl is empty and the filterControl is selected.. Is there any way to manually trigger the Angular MatDataSource filter?

score 0 · Answer 1 · answered May 14 '19 at 09:22

If you will need filtering in multiple places in your application I'd recommend a reusable way of filtering like mat-table-filter

Otherwise manually triggering the datasource to filter can be achieved with setting the filter object. You can set the values via keyup binding for inputs and selectionChange for mat-select component.

Trigger Angular MatDataSource filter manually

1 Answers1