Pipes

Search…
Pipes
Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions you can use in template expressions 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.
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: Formats a date value according to locale rules.
​UpperCasePipe: Transforms text to all upper case.
​LowerCasePipe: Transforms text to all lower case.
​CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
​DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
​PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.
1
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
2
The chained hero's birthday is
3
{{ birthday | date | uppercase}}
Copied!
Text interpolation
ARIA
Last modified 1yr ago
Copy link