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

Answer 1

Assuming dataSource is an array

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