how to add multiple filter values to angular material table? [duplicate]

Question

I am working on angular material table which should be filtered based on selected items from mat-select box. It works fine when I have normal select box where user can select only one item.

But the issue is I have it as multi-select box where user can select more than one filters.

Multiselect stores selected items in an array. How can I pass it to table datasource?

applyFilter() {
   console.log(this.selection); 
   this.dataSource.filter = this.selection.trim().toLowerCase() 
 }

How can I pass array of filter values?

Stackblitz demo

Answer 1

You can overwrite datasource.filterPredicate with your custom filter logic.

// array containing the selected options
selection: any[];

ngOnInit() {
  this.dataSource.filterPredicate = (userData: UserData, filter: string) => {
    // return true if the userData should be displayed
    return this.selection.length > 0 
      ? this.selection.some(version => version == data.version)
      : true;
  }
}

applyFilter() {
  // we don't use the filter value in filterPredicate and just pass some value here
  // to trigger the filter (there might be better options)
  this.dataSource.filter = 'only used to trigger filter';
}

https://stackblitz.com/edit/angular-7w9ajc-koib2f