Parameterizing pipes
A pipe can take parameters as well. We can pass parameters along with the pipe. A parameter is separated with a colon symbol (:
) after the pipe:
{{appValue|Pipe1: parameter1: parameter2 }}
Let's quickly build a simple example of a pipe to see it in action. Here's an example of DatePipe
with the MM-dd-yyyy
parameters:
{{today | date:'MM-dd-yyyy' }}
One more example of a pipe with parameters is given as follows:
{{salary | currency:'USD':true}}
Let's analyze the preceding code snippet in detail:
- We passed USD as a parameter to
CurrencyPipe
, which will tell the pipe to display the currency code, such as USD for the US dollar and EUR for the euro. - The
true
parameter stands for displaying the symbol of the currency ($
). By default, it's set to false.
Let's see them in action with complete code for the component:
import { Component } from '@angular/core'; @Component({ template: ` <h5>Parametrizing pipes</h5> <p>Date with parameters {{ today | date:'MM-dd-yyyy...