How to pass multiple arguments to Angular pipe


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 PipeTransform class
  • 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.

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.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.