Angular Material dataSource filter with array of string

Question

I am using Material table in my Angular project.

There is a provision to filter string and it working perfectly

myData: UserData[]; // Imagine its initialized
dataSource = new MatTableDataSource(myData);

applyFilter(filterValue: string)
{
  this.dataSource.filter = filterValue
}

Now, I want to filter with array of strings, but it's not working.

myData: UserData[]; // Imagine its initialized
dataSource = new MatTableDataSource(myData);

applyFilter(filteredValues: string[])
{
  this.dataSource.filteredData = filteredValues
}

Getting below error

Type 'String[]' is not assignable to type 'UserData[]'.
Type 'String' is not assignable to type 'UserData'.

score 1 · Accepted Answer · answered Jul 16 '21 at 09:13

To be able to filter from datasource of type String[], you have to specify a filterpredicate.

this.dataSource.filterPredicate = (data: String, filter: string) => {
    return data.includes(filter);
};

This now return all the string that includes the 'filterValue'.

Angular Material dataSource filter with array of string

1 Answers1