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