Angular Built-in Pipes

The built-in pipes in Angular are used to transform or format data before displaying it in the view. Pipes are simple functions that accept an input value and return a transformed value. Angular provides several built-in pipes that can be used for various purposes.

Syntax

The syntax to use an Angular built-in pipe is as follows:

{{value | pipeName:param1:param2:param3}}

Example

The following example shows how to use the uppercase pipe to convert text to uppercase:

<p>{{ 'hello world' | uppercase }}</p>

Output

The output of the above example will be:

HELLO WORLD

Explanation

Pipes are used to transform data in an Angular template. Each pipe accepts an input value and can accept one or more optional parameters to customize its behavior.

Use

Angular provides several built-in pipes that can be used for various purposes such as:

• DatePipe: Converts a date object into a string based on a specified format.
• UpperCasePipe: Converts a string to uppercase.
• LowerCasePipe: Converts a string to lowercase.
• CurrencyPipe: Formats a number as a currency.
• DecimalPipe: Formats a number as a decimal.
• PercentPipe: Formats a number as a percentage.

Important Points

• Pipes can be chained together to create more complex transformations.
• Pipes do not modify the original value passed to them; rather, they return a transformed value.
• Pipes can be parameterized using optional arguments passed to them in the template.
• Pipes can be created by developers to customize their applications.

Summary

Angular built-in pipes are essential tools used in transforming or formatting data in an Angular application. This guide provides an overview of Angular's built-in pipes and how they are used in a template. Understanding these pipes is crucial in building robust Angular applications.