In-depth Guides
Template Syntax

Understanding Pipes

Use pipes to transform strings, currency amounts, dates, and other data for display.

What is a pipe

Pipes are simple functions to use in templates 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.

You can create your own custom pipes to expose reusable transformations in templates.

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: 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.
  • AsyncPipe: Subscribe and unsubscribe to an asynchronous source such as an observable.
  • JsonPipe: Display a component object property to the screen as JSON for debugging.

Note: For a complete list of built-in pipes, see the pipes API documentation. To learn more about using pipes for internationalization (i18n) efforts, see formatting data based on locale.