THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
In this tutorial, You learn how to pass multiple arguments in pipe in Angular pipe
Usually pipe accepts single arguments, Multiple arguments can be passed to pipe with delimiter : separation.
Suppose we have a employee data coming from REST API and wants to display the data in database table. We have to declare an 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 full name with - Salutation firstName middleName lastName in one of column in html table.
In this example, We will create a name custom pipe and salutation is include with dynamic first,last and middle names passed to it.
This is how the name pipe looks like used in Angular components.
{{ salutation | name: ‘firstName’ : ‘middleName’ : ‘lastName’ }}
Passing multiple parameters to Angular pipe example
Let’s create a name 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;
}
}
This is a custom pipe for full name display
- Custom pipe implements
PipeTransformclass - PipeTransform contains transform method, Here is an syntax
transform(value: any, args?: any): any {
return null;
}
value is an attribute which we are going to apply pipe operation args- are arguments passed with either single or multiple arguments
- provide and override 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 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 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() {}
}
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 very easy to pass multiple parameters in An angular custom pipe, This example works in Angular 11 angular 12 and angular 13 version.
