How to apply filter on multiple column in table with angular 2 filter

Question

I am using angular 2 in my current project. And i am trying to apply multiple filter option in my table. You can refer below code.

In 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;

}

Actually i want previously filtered data and how to pass this data to tranform method — Trusha
– Trusha, Commented Dec 22, 2016 at 11:43

Sid Ali · Accepted Answer · 2017-03-20 17:34:47Z

2

this could help, can filter any table on 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;
}
}

answered Mar 20, 2017 at 17:34

Sid Ali

1,8774 gold badges18 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slaesh · Accepted Answer · 2016-12-22 12:13:52Z

0

Pipe's transform syntax is like this:

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

So in your case the 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 !
   }
}

answered Dec 22, 2016 at 12:13

slaesh

17k6 gold badges53 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to apply filter on multiple column in table with angular 2 filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related