From 29ad2aa44ba5dc74a1875c062e53e540f56563cb Mon Sep 17 00:00:00 2001 From: Virginia Dooley Date: Thu, 10 Feb 2022 18:42:59 +0000 Subject: [PATCH] docs: Understanding pipes new doc (#45897) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New overview file using the Understanding… format. The original Pipes document was considered too long and was broken down into several separate topics. Content edited with the assistance of the SME. PR Close #45897 --- .pullapprove.yml | 1 + aio/content/guide/pipes-overview.md | 52 +++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 aio/content/guide/pipes-overview.md diff --git a/.pullapprove.yml b/.pullapprove.yml index 13576e80d38..2f7a8f3d067 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -325,6 +325,7 @@ groups: 'aio/content/examples/template-expression-operators/**', 'aio/content/guide/pipes.md', 'aio/content/guide/pipes-custom-data-trans.md', + 'aio/content/guide/pipes-overview.md', 'aio/content/examples/pipes/**', 'aio/content/images/guide/pipes/**', 'aio/content/guide/providers.md', diff --git a/aio/content/guide/pipes-overview.md b/aio/content/guide/pipes-overview.md new file mode 100644 index 00000000000..0a3c33a9cf0 --- /dev/null +++ b/aio/content/guide/pipes-overview.md @@ -0,0 +1,52 @@ +# 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. + +
+ +For the sample application used in this topic, see the . + +
+ +## 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. + +
+ +* 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]. + +
+ +Create pipes to encapsulate custom transformations and use your custom pipes in template expressions. + +## Pipes and precedence + +The pipe operator has a higher precedence than the ternary operator (`?:`), which means `a ? b : c | x` is parsed as `a ? b : (c | x)`. +The pipe operator cannot be used without parentheses in the first and second operands of `?:`. + +Due to precedence, if you want a pipe to apply to the result of a ternary, wrap the entire expression in parentheses; for example, `(a ? b : c) | x`. + + + + + +[AioGuideI18nCommonFormatDataLocale]: guide/i18n-common-format-data-locale "Format data based on locale | Angular" + + + +@reviewed 2022-04-01