Using Pipes
Pipes are like a transform, they take data as input and transforms it to the desired output. A basic example of using pipes is shown below:
1
import { Component } from '@angular/core';
2
3
@Component({
4
selector: 'product-price',
5
template: `<p>Total price of product is {{ price | currency }}</p>`
6
})
7
export class ProductPrice {
8
price = 100.1234;
9
}
Copied!

Passing Parameters

A pipe can accept optional parameters to modify the output. To pass parameters to a pipe, simply add a colon and the parameter value to the end of the pipe expression:
1
pipeName: parameterValue
Copied!
You can also pass multiple parameters this way:
1
pipeName: parameter1: parameter2
Copied!
1
import { Component } from '@angular/core';
2
3
@Component({
4
selector: 'app-root',
5
template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" }}</p>'
6
})
7
export class AppComponent {
8
price = 100.123456;
9
}
Copied!
In the above example, we are using CurrencyPipe, DecimalPipe and LowerCasePipe together to display product prices appropriately. The price value of 100.123456 is displayed as ca$100.1235 using both pipes in conjunction.

Chaining Pipes

We can chain pipes together to make use of multiple pipes in one expression.
1
import { Component } from '@angular/core';
2
3
@Component({
4
selector: 'app-root',
5
template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" | lowercase }}</p>'
6
})
7
export class ProductPrice {
8
price = 100.123456;
9
}
Copied!
Last modified 7mo ago