CODEWITHSUNDEEP
angular
Jigarb1992
Jigarb1992

Reputation: 848

Multiple filter for one datatable in Angular 2

I am working on Angular 2. In one of my scenario I have to add multiple filters for one DataTable. I have created custom DataTable for my project.
Filters like: enter image description here

After searching on google and review answer on stackoverflow I found this Plunker https://plnkr.co/edit/e0PCIsqXumbXe6mAUWBI?p=preview

I have code as in plunker but not working for me.

My Code:

Pipe:

transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
    return items.filter(item => {
            let notMatchingField = Object.keys(filter)
                                         .find(key => item[key] !== filter[key]);

            return !notMatchingField; // true if matches all fields
        });
}

Component Html:

<tr *ngFor="let item of dataresult | jbgridfilter: filterItems | orderBy : [orderbyKey, 'ID']  | paginate: { itemsPerPage: numOfPages, currentPage: p }"
                      (click)="showRowDetails(item)">
                      <td *ngFor="let key of keysArray;"><span>{{item[key]}}</span></td>
                      <tr>

Component Class:

valueForFilter(key, event) {
      let item = {key: event};
      this.filterItems.push(item);
    }

Note that: the table is dynamic, means the fields can be any not fixed.

Upvotes: 1

Views: 2394

Answers (1)

bakerhumadi
bakerhumadi

Reputation: 351

I've updated the plunker here https://plnkr.co/edit/sJD1uQpkyBojzzt8nUps?p=preview

In valueForFilter, filterItems is an object not an array (at least in the plunker example), so push won't work for you. 

updateFilter(key,value){
  this.peopleFilter[key] = value; 
}

In addition, you need to set the piple as impure 

@Pipe({
    name: 'filter'
    pure: false 
})

I hope this helps

Upvotes: 1

Related Questions