3cfc260282
New Transforming data with pipes document. Content taken from the original Pipes document. Content edited with the assistance of the SME. PR Close #45897
3.3 KiB
Transforming data with parameters and chained pipes
Use optional parameters to fine-tune a pipe's output.
For example, use the CurrencyPipe with a country code such as EUR as a parameter.
The template expression {{ amount | currency:'EUR' }} transforms the amount to currency in euros.
Follow the pipe name (currency) with a colon (:) and the parameter value ('EUR').
If the pipe accepts multiple parameters, separate the values with colons.
For example, {{ amount | currency:'EUR':'Euros '}} adds the second parameter, the string literal 'Euros ', to the output string. Use any valid template expression as a parameter, such as a string literal or a component property.
Some pipes require at least one parameter and allow more optional parameters, such as SlicePipe. For example, {{ slice:1:5 }} creates a new array or string containing a subset of the elements starting with element 1 and ending with element 5.
Example: Formatting a date
The tabs in the following example demonstrates toggling between two different formats ('shortDate' and 'fullDate'):
- The
app.component.htmltemplate uses a format parameter for theDatePipe(nameddate) to show the date as 04/15/88. - The
hero-birthday2.component.tscomponent binds the pipe's format parameter to the component'sformatproperty in thetemplatesection, and adds a button for a click event bound to the component'stoggleFormat()method. - The
hero-birthday2.component.tscomponent'stoggleFormat()method toggles the component'sformatproperty between a short form ('shortDate') and a longer form ('fullDate').
Clicking the Toggle Format button alternates the date format between 04/15/1988 and Friday, April 15, 1988.
For date pipe format options, see DatePipe.
Example: Applying two formats by chaining pipes
Chain pipes so that the output of one pipe becomes the input to the next.
In the following example, chained pipes first apply a format to a date value, then convert the formatted date to uppercase characters.
The first tab for the src/app/app.component.html template chains DatePipe and UpperCasePipe to display the birthday as APR 15, 1988.
The second tab for the src/app/app.component.html template passes the fullDate parameter to date before chaining to uppercase, which produces FRIDAY, APRIL 15, 1988.
@reviewed 2022-4-01