how to add multiple filters in angular mat table?

Question

HTML this is the code of my component.html file in which i am adding filters on a table:

<mat-form-field>
        <input matInput  class="form-field" [formControl]="employeeFilter" >
        <mat-placeholder>Employee Name </mat-placeholder>
      </mat-form-field>
    <mat-form-field>
        <input matInput   class="form-field" [formControl]="projectFilter" >
        <mat-placeholder>Project Name</mat-placeholder>
      </mat-form-field>

TS File: this is my ts file in which i have written code for filtering columns using this link code. ngOnInit(): void {

this.userdataService.getReports().subscribe(data=>{
  this.userData=data;
  this.dataSource = new MatTableDataSource(this.userData.response);

  this.employeeFilter.valueChanges.subscribe((employeeFilterValue)=> {
    this.filteredValues['employee'] = employeeFilterValue;
    this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.projectFilter.valueChanges.subscribe((projectFilterValue) => {
      this.filteredValues['project'] = projectFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.dataSource.filterPredicate = this.customFilterPredicate();

  this.dataSource.paginator = this.paginator;
});

}

this is the filter function.

  customFilterPredicate() {
    const myFilterPredicate = function(data:userData, filter:string) :boolean {
      let searchString = JSON.parse(filter);
      let employeeFound = data.employee.toString().trim().toLowerCase().indexOf(searchString.employee.toLowerCase()) !== -1
      let projectFound = data.project.toString().trim().indexOf(searchString.project) !== -1
      if (searchString.topFilter) {
          return employeeFound || projectFound
      } else {
          return employeeFound && projectFound
      }
    }
    return myFilterPredicate;
  }

i am getting error in filter function while passing arguments in the following line

const myFilterPredicate = function(data:userData, filter:string) :boolean

Eliseo · Answer 1 · 2021-07-23T09:42:53.707

I think that your custom filter has some errors. You need take account when searchString.employee and searchString.project are null one or both

See that, in your code, if the employeeFilter is null or empty employeeFound is true and if projectFilter is null or empty projectFound is also true

Here is the response, but To complementary I make a stackblitz based in the tipical example of material Angular with the periodic elements.

To improve and simplify, I put all the FormControls in a FormGroup

form = new FormGroup({
    name: new FormControl(''),
    position: new FormControl(),
    and: new FormControl(false)
  });

To simply subscribe to valueChanges

this.form.valueChanges.subscribe(res => {
  this.dataSource.filter = JSON.stringify(res);
});

my customFilter is like

  customFilter = (data: PeriodicElement, filter: string) => {
    const filterData = JSON.parse(filter);

    //see that if filterData.name=null nameOk=true
    const nameOk =
      data.name.toLowerCase().indexOf(filterData.name.toLowerCase()) >= 0;

    //see that if filterData.position=null positionOk=true
    const positionOk = !filterData.position || data.position == filterData.position;

    if (filterData.and) { //there're no problemo
      return nameOk && positionOk;
    } else { //take account when filterData.name or filterData.position is null
      if (filterData.name && filterData.position) return nameOk || positionOk;
      else {
        if (filterData.name) return nameOk;
        if (filterData.position) return positionOk;

        return true;
      }
    }
  };

I hope sirve you as inspiration

how to add multiple filters in angular mat table?

1 Answers1

Linked