HDTuto.com

Angular Pass Multiple Parameters to Pipe Example



Hi Dev,

I am going to explain you example of pass multiple arguments to angular pipe. you can understand a concept of angular pass multiple parameters to pipe. i explained simply step by step pass multiple parameters to pipe angular. you'll learn how to pass multiple parameters to pipe in angular.

You can easily pass multiple arguments in pipe in angular 6, angular 7, angular 8 and angular 9 application.

In this example 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.

You can see bellow simple solution and full example bellow:

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>

You can see bellow output:

I hope it can help you...




April 26, 2020 | Category : Angular



Blog Search