How to pass multiple arguments to Angular pipe

In this tutorial, You learn how to pass multiple arguments in the pipe in Angular pipe.

Usually, pipe accepts single arguments, Multiple arguments can be passed to pipe with delimiter : separation.

Suppose we have employee data coming from REST API and want to display the data in a database table. We have to declare a model class for holding employee information.

Let’s declare employee model class Employee.ts

export class Employee {
  id: Number;
  name: string;
  firstName: string;
  middleName: string;
  lastName: string;
  salary: Number;
  salutation: string;
}

We want to display the full name with - Salutation firstName middleName lastName in one of the columns in the HTML table.

In this example, We will create a name custom pipe and the salutation is included with a dynamic first, last, and middle names passed to it.

It is how the named pipe looks like is used in Angular components.

{{ salutation | name: 'firstName' : 'middleName' : 'lastName'  }}

Passing multiple parameters to Angular pipe example

Let’s create a named pipe

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

@Pipe({
  name: "name",
})
export class NamePipe implements PipeTransform {
  transform(value: any, first: string, middle: string, last): any {
    return value + " " + first + " " + middle + " " + last;
  }
}

It is a custom pipe for full name display

Custom pipe implements thePipeTransform class
PipeTransform contains the transform method. Here is a syntax

  transform(value: any, args?: any): any {
    return null;
  }

value is an attribute that we are going to apply to pipe operation args- are arguments passed with either single or multiple arguments

provide and override the transform method with multiple arguments.

You can pass multiple arguments as described below

  transform(value: any, first: string, middle: string, last:string): any {
    return value + ' ' + first + ' ' + middle + ' ' + last;
  }

or you can also pass the args array with rest operators syntax. Rest operators are introduced in Ecmascript2015(ES6) for passing arguments array with new syntax.

  transform(value: any, names: string[]): any {
    return value + ' ' + names[0] + ' ' + names[1] + ' ' + names[2];
  }

How we are going to use this pipe

  {{employee.salutation|name:employee.firstName:employee.middleName:employee.lastName}}

Let’s configure the pipe in app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { CommonModule } from "@angular/common";
import { MultipleDirectiveComponent } from "../multiple-directive/multiple-directive.component";
import { NamePipe } from "../name.pipe";

@NgModule({
  imports: [BrowserModule, CommonModule],
  declarations: [AppComponent, MultipleDirectiveComponent, NamePipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angular typescript component:

import { Component, OnInit } from "@angular/core";
import { Employee } from "../app/employee";

@Component({
  selector: "app-namepipe-table",
  templateUrl: "./namepipe-table.component.html",
  styleUrls: ["./namepipe-table.component.css"],
})
export class NamepipeTableComponent implements OnInit {
  constructor() {}
  employees: Employee[] = [
    {
      id: 1,
      name: "John",
      salutation: "Mr",
      firstName: "fram",
      middleName: "mram",
      lastName: "fram",
      salary: 5000,
    },
    {
      id: 2,
      name: "John",
      salutation: "Mr",
      firstName: "fram",
      middleName: "mram",
      lastName: "fram",
      salary: 1000,
    },
    {
      id: 3,
      name: "Franc",
      salutation: "Mr",
      firstName: "fram",
      middleName: "mram",
      lastName: "fram",
      salary: 3000,
    },
    {
      id: 4,
      name: "Andrew ",
      salutation: "Mr",
      firstName: "fram",
      middleName: "mram",
      lastName: "fram",
      salary: 8000,
    },
  ];
  ngOnInit() {}
}

The angular template HTML component

<p>Angular pipe with multiple attributes example</p>
<table style="width:100%">
  <tr>
    <th>id</th>
    <th>fullname</th>
    <th>salary</th>
  </tr>
  <tr *ngFor="let employee of employees; ">
    <td>{{employee.id}}</td>
    <td>
      {{employee.salutation|name:employee.firstName:employee.middleName:employee.lastName}}
    </td>
    <td>{{employee.salary}}</td>
  </tr>
</table>

Conclusion

It is easy to pass multiple parameters in An angular custom pipe. The example works in Angular 11 Angular 15 and Angular 15 versions.

How to pass multiple arguments to Angular pipe

#Passing multiple parameters to Angular pipe example

#Conclusion

Passing multiple parameters to Angular pipe example

Conclusion