
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 the
PipeTransform
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.