Home > Software design >  Angular filter table on checkbox value
Angular filter table on checkbox value

Time:03-29

I am trying to filter my table based on the value of a checkbox, the filter should be possible with a dropdown, which shows either all rows, rows where the checkbox is checked, and rows where the checkbox is not checked. I tried with :

<tr *ngFor="let step of steps | tableFilter: checked"></tr>

But I cant get it to work. I am tying on the example here: https://stackblitz.com/edit/angular-fwnnzf-penyen?embed=1&file=app/table-basic-example.html Thanks!

CodePudding user response:

You have to filter the table data based on selection, you can do this by passing the data and the selection values like

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tableFilter'
})
export class TableFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log(args , 's' , value)
    if(args === 'Checked'){
        return value.filter(x=>x.checked)
    }else if(args === 'NotChecked'){
         return value.filter(x=>!x.checked)
    }else{
      return value
    }
  }

}

here is a working model https://stackblitz.com/edit/angular-5wb7ig?embed=1&file=app/table-selection-example.html

  • Related