Angular mat-table inline filter with drop down

Question

How to get a drop down in the inline filter with unique values from the grid. For example my JSON returns 100 rows of Person object. That has 5 columns. I want to filter all these columns. I want 3 columns to be text box and other 2 columns to be drop down. Here in the example there are 4 rows, I want to display only the 3 unique values (i.e. 'Dog', 'Cat' and 'Lizard') in the Pet filter and that should be a drop down. (Note: don't want to display 'Dog' twice the drop down). And upon selection of a value from the drop down, the table should refresh accordingly. Similarly for Active column where it should have only 2 values (i.e. true and false) in the drop down.

Stackblitz example

createFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean {
      let searchTerms = JSON.parse(filter);
      return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
        && data.id.toString().toLowerCase().indexOf(searchTerms.id) !== -1
        && data.colour.toLowerCase().indexOf(searchTerms.colour) !== -1
      //&& data.active.toLowerCase().indexOf(searchTerms.active) !== -1   ??? How to write this ???
        && data.pet.toLowerCase().indexOf(searchTerms.pet) !== -1;
    }
    return filterFunction;
  }

To the person who asked to Close - Sir/Madam I see you Close all my questions. Can you please tell me what wrong in this question? — SK.

SK. SK. · Accepted Answer · 2021-05-09T13:11:35

Got the answer. updated stackblitz example

this.petList = Array.from(new Set(this.people.map(ele=>ele.pet)));

<ng-container matColumnDef="pet">
    <th class="header" mat-header-cell *matHeaderCellDef>
      Pet
      <mat-form-field class="filter" floatLabel="never">
        <mat-label>Search</mat-label>
        <!-- <input matInput [formControl]="petFilter"> -->
        <mat-select  placeholder="Select" [formControl]="petFilter">
            <mat-option value="">Select</mat-option>
            <mat-option *ngFor="let item of petList" value="{{ item | lowercase }}">
                {{ item }}
            </mat-option>
        </mat-select>

      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let person">{{person.pet}}</td>
  </ng-container>

Angular mat-table inline filter with drop down

1 Answers