Using Pipes

Like a filter, a pipe also takes data as input and transforms it to the desired output. A basic example of using pipes is shown below:

import { Component } from '@angular/core';
@Component({
  selector: 'product-price',
  template: `<p>Total price of product is {{ price | currency }}</p>`
})
export class ProductPrice {
  price = 100.1234;
}

View Example

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:

pipeName: parameterValue

You can also pass multiple parameters this way:

pipeName: parameter1: parameter2

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" }}</p>'
})
export class AppComponent {
  price = 100.123456;
}

View Example

Chaining Pipes

We can chain pipes together to make use of multiple pipes in one expression.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" | lowercase }}</p>'
})
export class ProductPrice {
  price = 100.123456;
}

View Example

原文: https://angular-2-training-book.rangle.io/handout/pipes/using_pipes.html