CODEWITHSUNDEEP
angularangular7
Yugant Pardeshi
Yugant Pardeshi

Reputation: 87

Filter data of mat-table on selectionChange mat-select (cascaded filtering)

i have a mat-table which currently filters data on input. i have a mat-select that have only 2 options : active and inactive.

// html code for mat-select where status1 has 2 values : active & inactive

  <div style="width: 100%;">
  <div fxLayout="row" fxLayoutAlign="end center" style="padding: 15px 15px 
   0px 15px;">
   <mat-form-field>
    <mat-select placeholder="Select Status" 
    (selectionChange)="onselect($event)">
        <mat-option *ngFor="let item of status1" [value]="item.display"> 
   {{item.display}}</mat-option>

    </mat-select>
   </mat-form-field>
  </div>
 </div>

   // ts code
  status1: Status[] = [
  { value: '0', display: 'Active' },
  { value: '1', display: 'Inactive' }
  ];


 onselect(item: any) {
  this.accounts = this.jsonCustomerList.Accounts;
   this.dataSource.filter = item.trim().toLowerCase();
  }

  // object

     [ 
       {"AccountName": "range1",
      "State": "",
        "Zip": "",
        "Country": "",
        "IsDeleted": false},
          {"AccountName": "local1",
          "State": "",
        "Zip": "",
        "Country": "",
        "IsDeleted": true}
        ]

if i select active , mat-table should display only those records for IsDeleted : true. and vice versa for inactive ie. records with IsDeleted : false.

expecting ts code.

Upvotes: 4

Views: 1420

Answers (1)

Mustahsan
Mustahsan

Reputation: 3862

You need to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn't

ngOnInit(){
   /* configure filter */
   this.dataSource.filterPredicate =
  (data: any, filter: string) => {
   if ('active'.includes(filter.toLowerCase())) {
      return data.IsDeleted;
    } else if ('inactive'.includes(filter.toLowerCase())) {
      return !data.IsDeleted;
    } else {
      if(data.AccountName.includes(filter.toLowerCase())){
        return true;
      }else{
        return false;
      }
    }
}

Now You can easily filter your dataSource:

 onselect(item: any) {
     this.accounts = this.jsonCustomerList.Accounts;
     this.dataSource.filter = item.source.value.trim().toLowerCase();  //<--- Note this line
  }

Working demo link here

Upvotes: 3

Related Questions