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...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example