Make Filter works properly with Array Object property in Angular Material Data Table

Question

I have an Angular material data table which is implemented in the way that described in Angular Material documentation:

https://material.angular.io/components/table/overview#filtering

My issue is with my data source, I have this data model:

export interface CustomerHistory {
  entity_id: number;
  email: string;
  name: string;
  lastname: string;
  cpfcnpj: string;
  cpfcnpj2: string;
  rg: string;
  phone1: string;
  phone2: string;
  country: string;
  state: string;
  city: string;
  address: string;
  FullAddress: string;
  cep: string;
  orders: CustomerOrders[];
}

The last Property is Order Array which is causing filter not working properly in the way that works with other fields

This is my Filter Function:

applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}

My question is how can I search in Array Object property in my data source?

Possible duplicate of Filtering specific column in Angular Material Table with filtering in angular? — bugs

Redjon Sulaj Redjon Sulaj · Accepted Answer · 2019-01-29T11:05:59

First, when you drawTable make sure to create a loop like

    this.dataSource.data.orders.forEach(element => {
    element.toString();
//turn CustomerOrders[] to string
});

After that, applyFilter() should work

`applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}`

Make Filter works properly with Array Object property in Angular Material Data Table

1 Answers