How to implement Filter in Material table in Angular?

Question

.HTML:

How to implement the filter in this component as I have implemented it with the expansion table, but my filter is not working.

    <mat-dialog-content style="width: 63rem; overflow: initial;">       
      <div class="searchField">
        <mat-form-field appearance="standard">
          <mat-label>Filter</mat-label>
          <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Tele" #input>
        </mat-form-field>
      </div>  
     
    </mat-dialog-content>

.TS:

    getProductList() {
        this.commonservice.getProdList().subscribe((response: any) => {
          console.log('Response from API is ', response);
          if (response) {
            this.productInfo = response;
            this.dataSource = this.productInfo;
            console.log('Product Info ', this.productInfo);
          }
        }, (error) => {
          console.log('Error is ', error);
        });
      }

    applyFilter(event: Event) {
        const filterValue = (event.target as HTMLInputElement).value;
        this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
        console.log('filtered data ', this.dataSource.filter);
      }

zainhassan · Accepted Answer · 2022-02-08 19:21:28Z

1

Assuming dataSource is an array

this.dataSource = this.dataSource.filter((d)=>d === filterValue.trim().toLocaleLowerCase());

answered Feb 8, 2022 at 19:21

zainhassan

1,7929 silver badges12 bronze badges

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

3 Comments

Ankit Over a year ago

Still, I am not able to filter the data.

zainhassan Over a year ago

Your datasource is an array of object. you need to do "d.somePropertyOfObjectInArray === filterValue.trim().toLocaleLowerCase()"

Ankit Over a year ago

I was using this: this.dataSource = this.dataSource.filter((d:any) => d.product_name === filterValue.trim().toLocaleLowerCase());

Collectives™ on Stack Overflow

How to implement Filter in Material table in Angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related