close

How do I call an Angular 2 pipe with multiple arguments?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How do I call an Angular 2 pipe with multiple arguments? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How do I call an Angular 2 pipe with multiple arguments ?

  1. How do I call an Angular 2 pipe with multiple arguments ?

    do I call an Angular 2 pipe with multiple arguments You're missing the actual pipe.
    {{ myData | date:'fullDate' }}
    Multiple parameters can be separated by a colon (:).
    {{ myData | myPipe:'arg1':'arg2':'arg3' }}
    Also you can chain pipes, like so:
    {{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

  2. How do I call an Angular 2 pipe with multiple arguments ?

    do I call an Angular 2 pipe with multiple arguments You're missing the actual pipe.
    {{ myData | date:'fullDate' }}
    Multiple parameters can be separated by a colon (:).
    {{ myData | myPipe:'arg1':'arg2':'arg3' }}
    Also you can chain pipes, like so:
    {{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

Method 1

In your component’s template you can use multiple arguments by separating them with colons:

{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}

From your code it will look like this:

new MyPipe().transform(myData, arg1, arg2, arg3)

And in your transform function inside your pipe you can use the arguments like this:

export class MyPipe implements PipeTransform { 
    // specify every argument individually   
    transform(value: any, arg1: any, arg2: any, arg3: any): any { }
    // or use a rest parameter
    transform(value: any, ...args: any[]): any { }
}

Beta 16 and before (2016-04-26)

Pipes take an array that contains all arguments, so you need to call them like this:

new MyPipe().transform(myData, [arg1, arg2, arg3...])

And your transform function will look like this:

export class MyPipe implements PipeTransform {    
    transform(value:any, args:any[]):any {
        var arg1 = args[0];
        var arg2 = args[1];
        ...
    }
}

Method 2

You’re missing the actual pipe.

{{ myData | date:'fullDate' }}

Multiple parameters can be separated by a colon (:).

{{ myData | myPipe:'arg1':'arg2':'arg3' }}

Also you can chain pipes, like so:

{{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment