A pipe prepares a value for display in an Angular template. It transforms the value in a data binding, so presentation logic can stay focused and consistent rather than being repeated wherever the value appears. section 17.0 section 17.2
Format a product price
Use `{{ item.price | currency:"USD":"symbol" }}` in a product table. Angular passes `item.price` to the built-in `currency` pipe and uses the formatted result in the interpolation. The arguments after the colons request U.S. dollars and a currency symbol. A store listing can also specify digits: `{{ product.price | currency:"USD":"symbol":"2.2-2" }}`. section 17.2 section 5.5.1
Angular supplies pipes for common tasks, including formatting numbers, currencies, percentages, and dates, and changing string case. Other built-in pipes handle tasks such as JSON serialization, array slicing, key-value presentation, and consuming observable values. Choose one when its transformation fits the display requirement; use a custom pipe for specialized formatting. section 17.4 section 17.0 section 17.5
Table 17.4. The built-in pipes
|
Name
|
Description
|
|
number
|
This pipe performs location-sensitive formatting of number values. See the “Formatting numbers” section for details.
|
|
currency
|
This pipe performs location-sensitive formatting of currency amounts. See the “Formatting currency values” section for details.
|
|
percent
|
This pipe performs location-sensitive formatting of percentage values. See the “Formatting percentages” section for details.
|
|
date
|
This pipe performs location-sensitive formatting of dates. See the “Formatting dates” section for details.
|
|
uppercase
|
This pipe transforms all the characters in a string to uppercase. See the “Changing string case” section for details.
|
|
Lowercase
|
This pipe transforms all the characters in a string to lowercase. See the “Changing string case” section for details.
|
|
titlecase
|
This pipe transforms all the characters in a string to title case. See the “Changing string case” section for details.
|
|
json
|
This pipe transforms an object into a JSON string. See the “Serializing data as JSON” section for details.
|
|
slice
|
This pipe selects items from an array
or characters from a string, as described in the “Slicing data arrays” section.
|
|
keyvalue
|
This pipe transforms an object or map into a series of key-value pairs, as described in the “Formatting key-value pairs” section.
|
|
i18nSelect
|
This pipe selects a text value to display for a set of values, as described in the “Selecting values” section.
|
|
i18nPlural
|
This pipe selects a pluralized string for a value, as described in the “Pluralizing values” section.
|
|
async
|
This pipe subscribes to an observable or a promise and displays the most recent value it produces.
|
Use the built-in pipe table to find a pipe by the kind of value or presentation task it handles. section 17.4
A custom pipe is a class marked with `@Pipe` and a template name. Its `transform` method receives the input value and any pipe arguments, then returns the value used by the binding. In the module-based example, the pipe is registered in an Angular module’s `declarations`. Pipe names can also be chained with `|` to apply multiple transformations. Keep pipes focused on data preparation rather than component or directive responsibilities. section 17.3 section 17.3.1 section 17.0
By default, a pipe is pure: Angular reevaluates it when its input value or arguments change. Editing elements inside the same array may therefore leave a pure array-filtering pipe’s output unchanged. Setting `pure: false` makes Angular call its `transform` method during change detection even without those changes. Use that option sparingly and keep the transformation simple, because frequent calls can hurt performance. section 17.3.4
