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

frido · Accepted Answer · 2020-04-09 14:37:46Z

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

answered Apr 9, 2020 at 14:37

frido

14.3k5 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related