How to call an Angular Pipe with Multiple Arguments ?
Last Updated :
28 Apr, 2025
Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. Pipes are simple functions that accept an input and return a transformed value in a more technical understanding.
In this article, we will see How to call an Angular Pipe with multiple arguments, along with understanding their implementation with the help of suitable examples.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Create a pipe, go to src/app
ng generate pipe geek
Project Structure
It will look like the following:
Example 1: In this example, we will be passing 3 arguments with pipe.
HTML
app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h2>How to call an Angular pipe with multiple arguments?</h2>
<div *ngFor="let item of gfg |keyvalue">
<b>GeeksforGeeks!! -></b> {{item.value |geek:item.key:':':item.value}}
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
import {KeyValue} from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent{
gfg:any= {
"html": "Hyper Text Markup Language",
"css": "Cascade Style Sheet",
"xml": "Xtensive Markup Language",
"js": "Javascript"
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { GeekPipe } from './geek.pipe';
@NgModule({
declarations: [
AppComponent,
GeekPipe
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
geek.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'geek'
})
export class GeekPipe implements PipeTransform {
transform(arg1:any, arg2:any,arg3:any,arg4:any):any {
return arg2+arg3+arg4
}
}
Output:
Example 2: This is another example of how to call an angular pipe with multiple arguments. We will pass strings in the pipe as arguments and then style them using <h3> and change their color to green. Also, we will implement a pipe by providing a string as an argument type.
HTML
<!-- app.component.html -->
<h2 style="color: green">
GeeksforGeeks
</h2>
<h2>
How to call an Angular pipe with multiple arguments?
</h2>
<div *ngFor="let item of gfg |keyvalue">
{{item.key}} : {{item.value}}
<br>
<h3 style="color: green;">
{{item.value |geek:"Geeks Premier League ":" 2023 ":
"If you like the article, you the below like button to vote. ":
" Happy Learning!! "}}</h3>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent {
gfg: any = {
"html": "Hyper Text Markup Language",
"css": "Cascade Style Sheet",
"xml": "Xtensive Markup Language",
"js": "Javascript"
}
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
import { GeekPipe }
from './geek.pipe';
@NgModule({
declarations: [
AppComponent,
GeekPipe
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// geek.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'geek'
})
export class GeekPipe implements PipeTransform {
transform(arg1: any,
arg2: string,
arg3: string,
arg4: string,
arg5: string): any {
return arg2 + arg3 + arg4 + arg5
}
}
Output:
Similar Reads
How to limit to 2 decimal place with a Angular Pipe ? Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. In this article, we will learn How to Limit to 2 decimal places with a Simple Pipe. Steps for Installing & Configuring the Angular Application Step 1: Create an Angu
3 min read
How to make an http call in angular Angular, with its robust framework and extensive ecosystem, offers you powerful tools for building modern web applications. One such tool is the HttpClient module, which provides a seamless way to make HTTP calls and interact with RESTful APIs or backend services. In this article, we'll explore maki
3 min read
How to create a custom pipe in AngularJS ? In this article, we will learn how to generate custom pipe other than using built-in pipe in Angular & also explore its implementation. The Pipe is a function that is used to modify the data before rendering it to the user. Some of the pre-built pipes are date, uppercase, lowercase, currency, de
6 min read
How to create module with Routing in Angular 9 ? Angular applications are modular, and NgModules is Angular's own modular architecture. NgModules are containers for closely integrated application domains, workflows, or feature sets that comprise cohesive code blocks. Their scope is governed by the NgModule they include, and they can contain compon
4 min read
How to pass multiple parameter to @Directives in Angular ? Angular directives are TypeScript classes decorated with the @Directive decorator. These are powerful tools for manipulating the DOM and adding behavior to elements. They can modify the behavior or appearance of DOM elements within an Angular application. Directives can be broadly categorized into t
3 min read
How to Create a new module in Angular ? Modules are most important when it comes to building strong and scalable Angular applications. They help organize your code, promote modularity, and improve maintainability. It encourages collaboration among developers by grouping related components, directives, pipes, and services. In this article,
3 min read