CODEWITHSUNDEEP
angularangular-materialangular-material-table
Abraham Lincoln
Abraham Lincoln

Reputation: 313

Angular Material table filterPredicate not invoked

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(); 
  }

Upvotes: 2

Views: 2772

Answers (1)

Abraham Lincoln
Abraham Lincoln

Reputation: 313

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

Upvotes: 2

Related Questions