mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
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
45 lines
2.4 KiB
Markdown
45 lines
2.4 KiB
Markdown
# Understanding Pipes
|
|
|
|
Use [pipes](guide/glossary#pipe 'Definition of a pipe') to transform strings, currency amounts, dates, and other data for display.
|
|
|
|
## What is a pipe
|
|
|
|
Pipes are simple functions to use in [template expressions](/guide/glossary#template-expression 'Definition of template expression') to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
|
|
For example, you would use a pipe to show a date as **April 15, 1988** rather than the raw string format.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For the sample application used in this topic, see the <live-example name="pipes"></live-example>.
|
|
|
|
</div>
|
|
|
|
## Built-in pipes
|
|
|
|
Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data.
|
|
The following are commonly used built-in pipes for data formatting:
|
|
|
|
- [`DatePipe`](api/common/DatePipe): Formats a date value according to locale rules.
|
|
- [`UpperCasePipe`](api/common/UpperCasePipe): Transforms text to all upper case.
|
|
- [`LowerCasePipe`](api/common/LowerCasePipe): Transforms text to all lower case.
|
|
- [`CurrencyPipe`](api/common/CurrencyPipe): Transforms a number to a currency string, formatted according to locale rules.
|
|
- [`DecimalPipe`](/api/common/DecimalPipe): Transforms a number into a string with a decimal point, formatted according to locale rules.
|
|
- [`PercentPipe`](api/common/PercentPipe): Transforms a number to a percentage string, formatted according to locale rules.
|
|
- [`AsyncPipe`](api/common/AsyncPipe): Subscribe and unsubscribe to an asynchronous source such as an observable.
|
|
- [`JsonPipe`](api/common/JsonPipe): Display a component object property to the screen as JSON for debugging.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
- For a complete list of built-in pipes, see the [pipes API documentation](/api/common#pipes 'Pipes API reference summary').
|
|
- To learn more about using pipes for internationalization (i18n) efforts, see [formatting data based on locale][AioGuideI18nCommonFormatDataLocale].
|
|
|
|
</div>
|
|
|
|
Create your own pipes to encapsulate custom transformations and use them in template expressions like built-in pipes.
|
|
|
|
<!-- links -->
|
|
|
|
[AioGuideI18nCommonFormatDataLocale]: guide/i18n-common-format-data-locale 'Format data based on locale | Angular'
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2023-08-14
|