Angular Pipes

What are Angular pipes? Pipes are a feature in Angular that allow you to transform output within your template. Once your data is rendered onto the screen, pipes transforms that data. Angular pipes give you the flexibility to transform data in the view without changing the actual data values themselves. Pipes are one of the tools that make developing with Angular easy. It has clean style and the data-view transformations are declared on the HTML template data bindings.

You can use Angular pipes by declaring the variable, followed by the pipe symbol “|” inside the HTML template. There can be multiple pipes in one template and they can also be chained. You can create custom pipes as well but Angular provides several pipes already.

Syntax: {{ exampleVariable | pipeName }}

To use pipes, you must have a basic understanding of Typescript, HTML5, Templates in HTML5, CSS, and Angular Components.

We use pipes to keep raw data separate from the view data. We do this because we only want to transform the view data as we need it.

An example:

Here within the h2 element, we are showing a hero’s name and using a pipe operator to display the name in all uppercase. Uppercase is a pipe that Angular provides and transform data to show all letters in uppercase. The code above will display like this:

Angular provides built-in pipes for typical data transformations, including transformations for internationalization, which use locale information to format data. The following are commonly used built-in pipes for data formatting:

• CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
• DatePipe: Formats a date value according to locale rules.
• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
• UpperCasePipe: Transforms text to all upper case.
• LowerCasePipe: Transforms text to all lower case.
• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

Angular Pipes is a vital part of displaying view data. It transforms data to view data in any way the user would like. A solid understanding of using Angular pipe operators allows for a very strong Angular developer!