How to apply filter to multiple columns in a table with angular 2 filter

Question

I am using angular 2 in my current project. And I'm trying to apply several filter options in my table. You can link below the code.

In the HTML template:

<table class="table table-condensed table-responsive"> <thead> <tr> <td></td> <td *ngFor="let key of headers">{{key}}</td> </tr> <tr> <td></td> <td *ngFor="let key of headers; let i=index"> <input type='text' id="{{key}}" (keyup)="filterUser(key)" placeholder="Search User By {{key}}"/> </td> </tr> </thead> <tbody *ngFor="let user of alluser | userFilter : columnName : listFilter " #someVar> <tr> <td><input type="checkbox" class="checkbox" value="{{user.Id}}" (change)="getSelectedUser()" [(ngModel)]="user.IsSelected" /></td> <td>{{user.UserName}}</td> <td>{{user.FirstName | uppercase}}</td> <td>{{user.LastName}}</td> <td><button type="button" class="btn btn-primary" (click)="editModal.Open(user)">Edit</button></td> <td><button class="btn btn-primary" (click)='deletemodal.open()'>Delete</button></td> <td></td> </tr> </tbody> </table> 

In Filter Templete:

 export class UserFilterPipe implements PipeTransform { transform(value: User[], field: string, args: string): User[]{ let filter: string = args ? args.toLocaleLowerCase() : null; return filter ? value.filter((user: User) => user[field].toLocaleLowerCase().indexOf(filter) != -1) : value; } } 

In component:

  filterUser(key) { debugger; this.columnName = key; var v1 = document.getElementById(key).value; this.listFilter = v1; } 

Answer 1

this can help, can filter any table in all columns:

 @Pipe({ name: 'tableFilter', pure: false }) export class TableFilterPipe implements PipeTransform { keys = []; transform(items: any, args: string): any { if (items != null && items.length > 0) { let ans = []; if (this.keys.length == 0) { this.keys = Object.keys(items[0]); } for (let i of items) { for (let k of this.keys) { if (i[k].toString().match('^.*' + args +'.*$')) { ans.push(i); break; } } } return ans; } } 

Answer 2

Syntax

Pipe transform as follows:

 transform(__input__, __arg1__, __arg2__, ... __argn__) 

So, in your case, Pipe should look like this:

 export class UserFilterPipe implements PipeTransform { transform(value: User[], columnName: string, listFilter: string): User[]{ if (!value || !values.length) return []; // do your filtering here .. with both input values ! } }