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 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 salutation is included with a dynamic first, last and middle names passed to it.
It is how the named 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;
}
}
It is a custom pipe for full name display
- Custom pipe implements
PipeTransformclass - PipeTransform contains the transform method. Here is a 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() {}
}
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 12 and angular 13 versions.
