Angular Material table filterPredicate not invoked

Question

I have a custom filterPredicate that I had working with sample data, but now that I am using a request service to get data from an API is not being invoked. I have looked at other Stack Overflow answers, but none got me on the right track.

The table does indeed filter. I have an input in the HTML which calls an applyFilter method.

Any help would be appreciated. I have tried moving the filterPredicate to the OnInit method but that made no difference to the functionality.

Here is the code on ngOnInit that gets me the data:

    this.subs.add(this.requestService.get$()
      .subscribe((res) => {
        console.log(res);
        this.dataArray = res;
        this.dataSource = new MatTableDataSource<ICompletedRequest>(this.dataArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
        (err: HttpErrorResponse) => {
          console.log(err);
        }));
  }

And the code in ngAfterViewInit. The console log ngAfterViewInit and 'ngAfterViewInit done. Do show up in the console, but not the 'got here', 'filter' or textToSearch which indicates to me the predicate is getting set but never invoked.

    this.dataSource.filterPredicate =
    (data: ICompletedRequest , filter: string): boolean => {
      console.log('got here');
      var splitted = filter.split(" ", 10);

      // Must match on all items or return false
      for (let entry of splitted) {
        var textToSearch = data.requestorFirstName + " " + data.requestorLastName + " " + data.requestTypeDescription + " " + this.datepipe.transform(data.completedOn, 'MM/dd/yyyy') + " " +  data.managerFirstName + ' ' + data.managerLastName;
        textToSearch = textToSearch.toLowerCase();
        console.log("Filter");
        console.log(textToSearch);

        if ( !(textToSearch.includes(entry.toLowerCase()))) return false;

      }
      return true;
    };

And finally the applyFilter method

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase(); 
  }

score 2 · Accepted Answer · answered Mar 03 '22 at 13:12

I got this working my moving the filter to where I added the subscription

this.subs.add(this.requestService.get$('67425693-1142-4E02-B104-733DD26C5F47')
      .subscribe((res) => {
        console.log(res);
        this.dataArray = res;
        this.dataSource = new MatTableDataSource<ICompletedRequest>(this.dataArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.filterPredicate =
        (data: ICompletedRequest , filter: string): boolean => {
          console.log('got here');
          var splitted = filter.split(" ", 10);
    
          // Must match on all items or return false
          for (let entry of splitted) {
            var textToSearch = data.requestorFirstName + " " + data.requestorLastName + " " + data.requestTypeDescription + " " + this.datepipe.transform(data.completedOn, 'MM/dd/yyyy') + " " +  data.managerFirstName + ' ' + data.managerLastName;
            textToSearch = textToSearch.toLowerCase();
            console.log("Filter");
            console.log(textToSearch);
    
            if ( !(textToSearch.includes(entry.toLowerCase()))) return false;
    
          }
          return true;
        };
      },
        (err: HttpErrorResponse) => {
          console.log(err);
        }));

Wow, thanks a lot. Searched a while for this answer. Do you know why this is the case, and why it doesn't work otherwise? — JB17, Apr 11 '22 at 06:28
Can't say I dug into this any more once I got a solution, but glad it worked for you. If you figure this one out any further, I'd be happy to hear about it :) — Abraham Lincoln, Apr 16 '22 at 18:08

Angular Material table filterPredicate not invoked

1 Answers1