How to exactly match filter string data from select in Angular Material Table?

859 Views Asked by At

i am trying to filter my table by Production or Application name. I've used this guide https://www.freakyjolly.com/angular-material-table-custom-filter-using-select-box/ for my approach and everything works fine except for the part when production or application have part of the same string exactly the same.

For example if i select in my filter Second Application it should only show me rows where i have Second Application instead of that it shows me every row where it have "Application" in name.

I have no idea how to edit this filter logic to match exactly string from select

// Custom filter method fot Angular Material Datatable
  createFilter() {
    let filterFunction = function (data: any, filter: string): boolean {
      let searchTerms = JSON.parse(filter);
      let isFilterSet = false;
      for (const col in searchTerms) {
        if (searchTerms[col].toString() !== '') {
          isFilterSet = true;
        } else {
          delete searchTerms[col];
        }
      }
      
      let nameSearch = () => {
        let found = false;
        if (isFilterSet) {
          for (const col in searchTerms) {
            searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
              if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
                found = true
              }
            });
          }
          return found
        } else {
          return true;
        }
      };
      return nameSearch()
    };
    return filterFunction
  }
1

There are 1 best solutions below

0
Artur Majchrzak On BEST ANSWER

I think i managed to get this right and it works as I wanted. I just filter completly by column:

filterValues = {
 prodName: '',
 appName: ''
};

Then i wrote this filter:

  columnFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean{
      let searchTerms = JSON.parse(filter);
      return data.prodName.toLowerCase().indexOf(searchTerms.prodName) !== -1
      && data.appName.toLowerCase().indexOf(searchTerms.appName) !== -1;
    };
    return filterFunction;
  }