CODEWITHSUNDEEP
angular
user3683666
user3683666

Reputation: 85

Filter Angular Material Table with Dropdown

I have created an angular table and i want to apply filter based on a specific column. i have defined mat-select with mat-options but the problem is when i select from a dropdown data disappears and nothing filters.

here is my markup 

<div class="col-sm-4 col-md-4">
          <mat-form-field >
              <mat-select [(value)]="filterValue" placeholder="Type">
                <mat-option *ngFor="let type of types" [value]="type" (click)="applyFilter(type)">
                  {{type}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </div>

in typescrip i have written

types = ["All", "Income","Expense"]

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

here i want to filter on Type column (Income and Expense)

enter image description here

and also i want to know how to how to retrieve all data by selectin "All" option enter image description here

Upvotes: 0

Views: 1868

Answers (1)

A.khalifa
A.khalifa

Reputation: 2496

Try this 

<div class="col-sm-4 col-md-4">
          <mat-form-field >
              <mat-select [(value)]="filterValue" placeholder="Type" (click)="applyFilter($event)">
                <mat-option *ngFor="let type of types" [value]="type" >
                  {{type}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </div>

and

applyFilter(event) {    
      this.dataSource.filter = event.value.toLowerCase();     
  }

Upvotes: 1

Related Questions