What are Pipes in Angular? Example

In Angular, pipes are a powerful feature that allows you to transform data before displaying it in your templates. Pipes act as filters or formatters that take an input value and apply a transformation to it, producing an output that can be displayed in the user interface.

Pipes provide a convenient way to manipulate and format data without modifying the underlying data itself. They are especially useful when working with dynamic data and need to present it in a user-friendly and consistent manner.

Built-in Pipes in Angular:

Angular provides a set of built-in pipes that cover a wide range of common transformations. Some of the commonly used built-in pipes are:

1. {{ value | uppercase }}: Converts the input string to uppercase.
2. {{ value | lowercase }}: Converts the input string to lowercase.
3. {{ value | currency }}: Formats the input number as a currency.
4. {{ value | date }}: Formats the input date according to the specified format.
5. {{ value | slice }}: Extracts a portion of the input string or array.

These are just a few examples of the many built-in pipes available in Angular. They can be easily used in templates by chaining them with the `pipe operator (|)`.

Creating Custom Pipes:

In addition to the built-in pipes, Angular allows you to create custom pipes to perform specific transformations that are not covered by the built-in ones. Creating a custom pipe involves implementing the PipeTransform interface and defining the transformation logic in the transform method.

The transform method receives the input value as an argument and can accept additional parameters if needed. It performs the desired transformation and returns the transformed output value.

Here's an example of a custom pipe that doubles a given number:

typescript
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'double'
})
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

To use the custom pipe in a template, you can simply include it using the pipe operator:

html
<p>The doubled value is: {{ inputValue | double }}</p>

This will display the doubled value of the inputValue variable using the DoublePipe transformation.

The output of the line <p>The doubled value is: {{ inputValue | double }}</p> will be:

ouput
The doubled value is: 20

This is assuming that the inputValue variable has a value of 10 before it is passed through the DoublePipe transformation. The DoublePipe doubles the input value, resulting in the output value of 20. The resulting value is then displayed within the paragraph (<p>) element.

Chaining Pipes:

Pipes can be chained together to perform multiple transformations in a sequential manner. The output of one pipe can be passed as the input to another pipe, allowing for complex data manipulations.

html
<p>The formatted date is: {{ currentDate | date | uppercase }}</p>

The output of the line <p>The formatted date is: {{ currentDate | date | uppercase }}</p> will depend on the value of the currentDate variable and the current date when the program is executed.

Assuming the currentDate variable holds the value of the current date (e.g., new Date()), and the current date is January 1, 2023, the output will be:

output
The formatted date is: SUNDAY, JANUARY 1, 2023

The currentDate value is first passed through the date pipe, which formats it as a date using the default formatting. In this case, it will display as "January 1, 2023". Then, the result of the date pipe is passed through the uppercase pipe, which converts the text to uppercase, resulting in "SUNDAY, JANUARY 1, 2023". Finally, the formatted and uppercase date is displayed within the paragraph (<p>) element.

Conclusion:
Pipes in Angular are a powerful feature that enables data transformation and formatting in templates. They provide a convenient and reusable way to manipulate data without modifying the original values.

By utilizing both the built-in and custom pipes, developers can enhance the user experience by presenting data in a visually appealing and consistent manner. Pipes contribute to the overall maintainability and reusability of Angular applications by encapsulating data transformation logic in a modular and reusable format.

Understanding and effectively utilizing pipes in Angular allows developers to create more dynamic and user-friendly applications.