Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

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 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.

For the sample application used in this topic, see the live example / download example.

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.

Create your own pipes to encapsulate custom transformations and use them in template expressions like built-in pipes.

Last reviewed on Mon Aug 14 2023