angularangular-materialangular-filtersmat-table

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


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
  }

Solution

  • 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;
      }