How To Add Multiple Filters In Angular Mat Table?

HTML this is the code of my component.html file in which i am adding filters on a table: ), 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