Angular Pass Multiple Parameters to Pipe Example

Hello Devs, 

In this tutorial, we will learn Angular Pass Multiple Parameters to Pipe Example

In this section, we will create 'descPipe' custom pipe and create dynamic description with multiple parameters. basically we will create "persons" array and print in table then using custom pipe that will create dynamic description.

Follow this step by step guide below. 

Solution:

{{ person.desc | descPipe: 'arg1' : 'arg2' : 'arg3'  }}

transform(desc: any, id: any, name: any, website: any): any {

  

    return desc + ': ' + 'Your ID is ' + id + '. Your Name is ' + name + '. Your Website is ' + website + '.';

  

}

Example:

src/app/desc-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

    

@Pipe({

  name: 'descPipe'

})

export class DescPipePipe implements PipeTransform {

     

  transform(desc: any, id: any, name: any, website: any): any {

  

    return desc + ': ' + 'Your ID is ' + id + '. Your Name is ' + name + '. Your Website is ' + website + '.';

  

  }

     

}

Import Pipe: src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

  

import { AppComponent } from './app.component';

import { DescPipePipe } from './desc-pipe.pipe';

  

@NgModule({

  imports:      [ BrowserModule, FormsModule  ],

  declarations: [ AppComponent, DescPipePipe ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Update Component: src/app/app.component.ts

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  

  persons = [

    {

      id: 1,

      name: 'Hardik Savani',

      gender: 'Male',

      website: 'itsolutionstuff.com',

      desc: 'Your Info: ',

    },

    {

      id: 2,

      name: 'Kajal Patel',

      gender: 'Female',

      website: 'nicesnippets.com',

      desc: 'Your Info: ',

    },

    {

      id: 3,

      name: 'Harsukh Makawana',

      gender: 'Male',

      website: 'laracode.com',

      desc: 'Your Info: ',

    }

  ]

}

Use Pipe in HTML: src/app/app.component.html

<h1>How to Pass Multiple Parameters to Pipe in Angular - ItsolutionStuff.com</h1>

    

<table border="1">

  <tr>

    <th>ID</th>

    <th>Name</th>

    <th>Website</th>

    <th>Desc</th>

  </tr>

  <tr *ngFor="let person of persons">

    <td>{{ person.id }}</td>

    <td>{{ person.name }}</td>

    <td>{{ person.website }}</td>

    <td>{{ person.desc | descPipe: person.id : person.name : person.website  }}</td>

  </tr>

</table>

May this example help you.