How to call an Angular Pipe with Multiple Arguments ?

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>

Javascript

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"
  }


}

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 { }

Javascript

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>

Javascript

// 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"
    }
}

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 { }

Javascript

// 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: