Angular Material Table filterPredicate to filter objects

Question

I have a mat-table with a text input to filter it's results.

Datasource is:

[
    {
        "articolo": {
            "code": "22.398.14",
            "url": "/url1"
        },
        "color": "white",
        "weight": "10"
    },
    {
        "articolo": {
            "code": "22.398.15",
            "url": "/url2"
        },
        "color": "red",
        "weight": "20"
    }
]

I add this in html:

    <mat-form-field>
    <mat-label>Filtra</mat-label>
    <input matInput (focus)="setupFilter('articolo')" (keyup)="applyFilter($event)" placeholder="Filter">
    </mat-form-field>

And in ts:

setupFilter(column: string) {
    this.data.filterPredicate = (data, filter) => {
      data[column].code.indexOf(filter) != -1;
    }
  }

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

But nothing happens

If I add a console.log inside filterPredicate it doesn't fire:

this.data.filterPredicate = (data, filter) => {
      console.log(data);
...

What's wrong?

thanks

Qarun · Accepted Answer · 2020-03-04 08:03:15Z

1

If you need to make own filtering behaviour for your "code" attribute create it onese in constructor or ngOnInit hook, just like this:

ngOnInit() {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.filterPredicate = (data, filter) => {
      return data.articolo.code.indexOf(filter) != -1;
    }
  }

Pay attention on return statement in filterPredicate. You don't used it! Also, you don't need this (focus)="setupFilter('articolo')" . all you have to do just call applyFilter, as you do it, like this:

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

Then you can see in console your filtered data during changing input value. Hope, I helped you .I can't understand why your data is nested. Good idea weel be first convert this data, then apply filters. May be in your case it's good.

answered Mar 4, 2020 at 8:03

Qarun

743 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carnaru Valentin Over a year ago

you example it's just for a column...

A-Figerou · Accepted Answer · 2020-03-03 11:10:16Z

0

You are assigning a function nevertheless not calling it.

this.data.filterPredicate = (data, filter) => { data[column].code.indexOf(filter) != -1; }

Try

to console log this.data.filterPredicate(data, filter). This will return nothing, arrgggh you have a function that is not returning anything.

Catch (e) =>

do one thing at a time: so, a function. Console log direct.

edited Mar 3, 2020 at 11:10

answered Mar 3, 2020 at 11:03

A-Figerou

1652 silver badges8 bronze badges

1 Comment

A-Figerou Over a year ago

chouette go go :)

Collectives™ on Stack Overflow

Angular Material Table filterPredicate to filter objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related