Pass multiple values to pipe in Angular 6

Question

I need to create a search form in Angular 6 with pipe and must pass multiple arguments to pipe .

nameSearch , emailSearch ,roleSeach , accountSearch

 <tr *ngFor="let user of data | searchuser: nameSearch" ></tr>

and this my pipe :

@Pipe({
  name: 'searchuser'
})
export class SearchuserPipe implements PipeTransform {

  transform(users: IUser[], nameSearch: string): IUser[] {
    if(!users) return [];
    if(!nameSearch) return users;

    nameSearch=nameSearch.toLocaleLowerCase();
    return users.filter(item=>
      {
         return item.desplayName.toLocaleLowerCase().includes(nameSearch)
      });
  }

please guide me how create pipe search with multi argument .

Edit :

  transform(users: IUser[], nameSearch: string ,eamilSearch:string,roleSearch:string): IUser[] {
if(!users) return [];
if(!nameSearch) return users;
if(!eamilSearch) return users;
if(!roleSearch) return users;

nameSearch=nameSearch.toLocaleLowerCase();
return users.filter(item=>
  {
      item.desplayName.toLocaleLowerCase().includes(nameSearch),
      item.email.toLocaleLowerCase().includes(eamilSearch),
      item.description.toLocaleLowerCase().includes(roleSearch)          
  });
}

Have you checked : https://angular.io/guide/pipes#custom-pipes ? — Florian, Nov 30 '18 at 09:55

SiddAjmera · Accepted Answer · 2018-11-30T11:25:14.697

You can add more parameters to the transform method that you'll have to implement in the pipe.

Make these parameters as optional so that you could use them as per your convenience.

Something like this:

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

export interface IUser {
  displayName: string;
  name: string;
  email: string;
  role: string;
  account: string;
  description: string;
}

@Pipe({
  name: 'searchUser'
})
export class SearchUserPipe implements PipeTransform {

  transform(
    users: IUser[],
    nameSearch?: string,
    emailSearch?: string,
    roleSearch?: string,
    accountSearch?: string
  ): IUser[] {

    if (!users) return [];
    if (!nameSearch) return users;
    nameSearch = nameSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.displayName.toLocaleLowerCase() ===  nameSearch)];

    if (!emailSearch) return users;
    emailSearch = emailSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.email.toLocaleLowerCase() ===  emailSearch)];

    if (!roleSearch) return users;
    roleSearch = roleSearch.toLocaleLowerCase();
    users = [...users.filter(user => user.role.toLocaleLowerCase() ===  roleSearch)];

    return users;
  }
}

Now in your template, you can simply use this pipe and pass arguments separated by a color(:), something like this:

<input type="text" placeholder="name" [(ngModel)]="nameSearch">
<input type="text" placeholder="email" [(ngModel)]="emailSearch">
<input type="text" placeholder="role" [(ngModel)]="roleSearch">
<input type="text" placeholder="account" [(ngModel)]="accountSearch">

<table>
  <tbody>
    <tr *ngFor="let user of data | searchUser: nameSearch: emailSearch: roleSearch: accountSearch">
      <td>
        {{ user | json }}
      </td>
    </tr>
  </tbody>
</table>

Here's also the Component Code:

import { Component } from '@angular/core';

@Component({...})
export class AppComponent  {

  nameSearch = '';
  emailSearch = '';
  roleSearch = '';
  accountSearch = '';

  data = [...];
}

Here's a Working Sample StackBlitz for your ref.

@kianoush, could you please add some sample data as well to work with? — SiddAjmera, Nov 30 '18 at 11:06
when i use one argument, it work , when i use 3 field just `roleSearch` is work . i put the code in edit question — Mr-Programer, Nov 30 '18 at 11:12
Yeah the overall idea is to just use the arguments separated by `:`. But in case of static arguments wrap them around quotes. In case of arguments as I have as of now in the Updated answer and StackBlitz, you can use the properties as I've done. — SiddAjmera, Nov 30 '18 at 11:13
i using your code but still not work . just `rolesearch` is work — Mr-Programer, Nov 30 '18 at 11:18
@kianoush, I've updated my answer with the updated logic. BTW, you're pivoting away from your quesiton. Your initial quesiton was about passing multiple args to a Pipe. But then your quesiton was shifted to fixing your logic. Please consider creating a different question in the future. This would be better for the site. Creates less noise. — SiddAjmera, Nov 30 '18 at 11:27

score 9 · Answer 2 · answered Nov 30 '18 at 09:52

9

It should be same way the you pass the single parameter with comma separation as follows,

export class SearchuserPipe implements PipeTransform {  
   transform(users: IUser[], nameSearch:string, emailSearch:string, roleSearch:
   string):IUser[] {
}

and in template,

<tr *ngFor="let user of data | searchuser: nameSearch : emailSearch : roleSearch" ></tr>

answered Nov 30 '18 at 09:52

Sajeetharan

216,225
63
350
396

thanks but when i using this code it not work my pipt :`transform(users: IUser[], nameSearch: string ,eamilSearch:string,roleSearch:string): IUser[] { if(!users) return []; if(!nameSearch) return users; if(!eamilSearch) return users; if(!roleSearch) return users; nameSearch=nameSearch.toLocaleLowerCase(); return users.filter(item=> { item.desplayName.toLocaleLowerCase().includes(nameSearch), item.email.toLocaleLowerCase().includes(eamilSearch), item.description.toLocaleLowerCase().includes(roleSearch) });` – Mr-Programer Nov 30 '18 at 10:57

Pass multiple values to pipe in Angular 6

2 Answers2

Linked