Pass multiple values to pipe in Angular

by Abdul Rawoof A R Updated: Mar 17, 2023

Guide Kit

We can chain multiple pipes together, which helps in scenarios where we need to associate more than one pipe that needs to be applied, and the final output will be transformed with all the pipes applied.

An interface implemented by pipes to perform a transformation invokes the transform method with the value of binding as the first argument and any parameters as the second argument in list form. Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application while only declaring each pipe once.

Here is an example of how to pass multiple values to pipe in Angular:

Fig: Preview of the output that you will get on running this code from your IDE.

Code

Pass multiple values to pipe in Angular 6

Lines of Code : 69License : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries :

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

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

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

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

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

  data = [...];
}

Instructions

Follow the steps carefully to get the output easily.

Install Visual Studio Code on your computer.
Open terminal, install Angular using this command-'npm install -g @angular/cli@latest'.
Create new folder using the command-'ng new folder_name'.
Then open the folder from File->Open Folder.
Create a new ts file(eg: search-user.pipe.ts).
Copy first 40 lines of code and paste it into that 'search-user.pipe.ts file'.
Copy the HTML code and paste it into 'app.component.html file'.
Copy the balance component lines and paste it into 'app.component.ts fie'.
Import 'search-user.pipe.ts file' and 'FormsModule' in 'app.module.ts file'.
Save the files and open the terminal, use this command-'ng serve' to generate the output in localhost.

I hope you found this helpful.

I found this code snippet by searching for 'pass multiple values to pipe in angular' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created and tested in Visual Studio Code 1.74.1.
The solution is test in Angular CLI - 15.2.2.

Using this solution, we are able to pass multiple values to pipe in Angular with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to pass multiple values to pipe in Angular.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page.

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Pass multiple values to pipe in Angular

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow