c0d3a019c2
**Pipes Sample Code** Migrated all sample code in the `examples/pipes` folder. Did not touch the pipes in the ToH or Testing folders. >The existing, complex discussion of the `CurrencyPipe` within `pipes-transform-data.md` cried out for a new `concurrency-formatting.component` example`. **Extracted "pipe precedence" into its own page** The topic had been extracted from `pipe.md` and tacked on to the bottom of the `pipes-overview.md` page. It's an advanced and somewhat obscure topic that doesn't belong in the overview. Rather than throw it away, I created a new `pipe-precedence.md` page and added it to the bottom of the pipes section navigation. I also tried to improve both the guide text and the companion component, `precedence.component`. **How to create a pipe is missing** The readers are told they can create their own pipes in several places throughout the docs. But there are no links and you can't navigate to a page that covers the topic. This is a serious omission! The topic is introduced in the `pipes-custom-data-trans.md` page (extracted verbatim from `pipes.md`). But you can't navigate to this page and their are no links to it. TODO: restore this page and add it to the left-nav. **Change `pipes.md` references to `pipe-overview.md`** The original, kitchen-sink page, `pipes.md`, was disconnected from navigation long ago, in favor of multiple pages such as `pipe-overview.md`. The page is still in the AIO documentation and can be found by searching or by links from 3rd party documenters. Landing on that page hides the left-nav. In this commit, we treat `pipes.md` as deprecated (which it seems to be). Therefore, this commit retargets previous `pipes.md` references to `pipe-overview.md`. >The `change-detection-slow-computations.md` is the exception. It refers to "pure pipes", a subject not covered in the current pipe documentation. That reference is retargeted to `api/core/Pipe#pure`. Certain code files are only referenced in `pipe.md`. They still work and are displayed in the overall pipes code sample as before. Now they are marked with deprecation comments for future treatment or removal. For consistency, certain sections of `pipes.md` were replaced by the contents of the corresponding current pages. PR Close #51333
3.1 KiB
Transforming data with parameters and chained pipes
Some pipes have optional parameters to fine-tune the pipe's output.
For example, the CurrencyPipe accepts a country code as a parameter.
To specify the parameter, follow the pipe name (currency) with a colon (:) and the parameter value (a country code).
The template expression {{ amount | currency:'EUR' }} displays the amount, prefixed with the Euros symbol (€).
Some pipes accept multiple optional parameters. Pass each parameter to the pipe, separated by colons.
For example, {{ amount | currency:'EUR':'Euros '}} displays the amount with the label "Euros" (the second parameter) instead of the Euros symbol.
Some pipes, such as SlicePipe, require at least one parameter and may allow more optional parameters.
The expression {{ anArray | slice:1:5 }} displays a new string containing a subset of the elements starting with element 1 and ending with element 5.
Example: Formatting a date
The following example demonstrates two ways to format a hero's birthdate with the DatePipe.
In the template, the first expression passes the birthdate to the DatePipe with a literal date format parameter, "shortDate". The output is 04/15/88.
The second expression passes the birthdate to the DatePipe with a date format parameter bound to a component property (format).
Clicking the "Toggle" button switches that property value between two of the many possible pre-defined formats, 'mediumDate' and 'fullDate'. The output is either April 15, 1988 or Friday, April 15, 1988.
The page displays the birthdate in the specified format.
Example: Chaining two pipes together
Connect multiple pipes, using "pipe chaining syntax", so that the output of one pipe becomes the input to the next.
The following example passes the birthdate to the DatePipe and then forwards the result to the UpperCasePipe pipe, using "pipe chaining syntax".
Once again, it demonstrates the DatePipe both with and without a format parameter. Note that both results (APR 15, 1988 and FRIDAY, APRIL 15, 1988) are in uppercase.
Switch to the class file to see that this is a standalone component; it imports the two pipes from @angular/common, the source of all built-in pipes.
@reviewed 2023-08-14