Mastering Angular Pipes: A Comprehensive Guide to Types and Usage

Angular is a powerful framework that provides developers with a wide range of tools to build dynamic and scalable applications. One of the key features of Angular is Pipes, which allow you to transform data in your templates in a declarative manner. Whether you are formatting dates, filtering lists, or converting text to uppercase, Angular pipes simplify data manipulation and make your templates more readable and maintainable.

In this article, we’ll dive into Angular Pipes, exploring their types, uses, and how you can create custom pipes to meet your specific needs.

What Are Angular Pipes?

In Angular, pipes are simple functions that take in data as input, transform that data, and return a new value. They are used within templates to format or manipulate data before it is displayed to the user. Pipes can be used to perform tasks like formatting dates, filtering arrays, sorting data, and more.

Syntax of Angular Pipes

The basic syntax for using a pipe in Angular is as follows:

{{ value | pipeName:pipeArgument }}

• value: The input data you want to transform.
• pipeName: The name of the pipe (e.g., date, uppercase).
• pipeArgument: Optional arguments that modify how the pipe transforms the data (e.g., date format).

For example, to format a date using the built-in date pipe:

{{ currentDate | date:'fullDate' }}

This would display the current date in a “full date” format (e.g., “Tuesday, November 22, 2024”).

Built-in Pipes in Angular

Angular provides a wide variety of built-in pipes that are ready to use. These pipes cover many common data transformation scenarios and can help you save time while building applications.

1. DatePipe

The DatePipe is used to format date and time. It supports various formats such as short, long, medium, and custom formats.

Example:

{{ currentDate | date:'yyyy-MM-dd' }}

This will format the currentDate in YYYY-MM-DD format.

2. UpperCasePipe and LowerCasePipe

These pipes are used to transform text to uppercase or lowercase.

Example:

{{ name | uppercase }}  <!-- Output: "JOHN" -->
{{ name | lowercase }}  <!-- Output: "john" -->

3. CurrencyPipe

The CurrencyPipe formats numbers as currency values. It allows you to specify the currency symbol, locale, and number of decimals.

Example:

{{ price | currency:'USD':true:'1.2-2' }}

This would display the price in USD with 2 decimal places.

4. PercentPipe

The PercentPipe is used to format numbers as percentages.

Example:

{{ value | percent:'1.0-2' }}

This would display the value as a percentage, showing one to two decimal places.

5. JsonPipe

The JsonPipe is useful when you need to display the raw JSON format of an object.

Example:

{{ objectData | json }}

This will render the objectData as a formatted JSON string.

6. DecimalPipe

The DecimalPipe is used to format numbers according to specific decimal places.

Example:

{{ number | number:'1.0-3' }}

This will display the number with a minimum of 1 digit before the decimal point and up to 3 digits after the decimal point.

7. SlicePipe

The SlicePipe is used to slice arrays or strings. It allows you to extract a portion of the data.

Example:

{{ text | slice:0:5 }}  <!-- Output: "Hello" -->

This will display the first 5 characters of the string.

Custom Pipes in Angular

While Angular provides several built-in pipes, there are times when you need to create your own custom pipes to meet specific data transformation requirements. Custom pipes are especially useful when you need to format or filter data in ways that aren’t covered by Angular’s built-in pipes.

How to Create a Custom Pipe

To create a custom pipe in Angular, you use the Pipe decorator and implement the PipeTransform interface. Let’s look at an example of a custom pipe that formats a string to be in title case.

Step-by-Step Example: Creating a Title Case Pipe

1. Generate a New Pipe

To generate a new pipe, run the following command in the Angular CLI:

ng generate pipe titleCase

2. Define the Pipe Logic

Edit the generated title-case.pipe.ts file to implement the logic for the custom pipe:

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

@Pipe({
  name: 'titleCase'
})
export class TitleCasePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;
    return value.replace(/\b\w/g, char => char.toUpperCase());
  }

}

In this example, the pipe will capitalize the first letter of each word in the string.

3. Use the Custom Pipe in a Template

After creating the custom pipe, you can use it in your Angular templates like any other pipe:

{{ 'hello world' | titleCase }}  <!-- Output: "Hello World" -->

Why Use Pipes in Angular?

Pipes offer several benefits in Angular applications:

1. Declarative Data Transformation: Pipes allow you to apply transformations in the template rather than in the component class, making your code cleaner and more readable.
2. Reusability: Once defined, pipes can be reused throughout your application, avoiding repetitive code.
3. Separation of Concerns: Pipes separate data formatting and manipulation from business logic, making the application more maintainable.

Conclusion

Angular pipes are an incredibly powerful feature that allows developers to transform and format data directly in templates. With a variety of built-in pipes and the ability to create custom pipes, Angular makes it easy to handle data transformation in a clean and efficient manner.

In this guide, we covered the most commonly used Angular built-in pipes like DatePipe, CurrencyPipe, UpperCasePipe, and LowerCasePipe, and also demonstrated how to create your own custom pipes. By mastering pipes, you can significantly improve the readability and maintainability of your Angular applications.

Start using Angular pipes today to simplify your templates and streamline your data transformation logic!