Pipes in Angular: Transforming Data in Templates

Pipes are a powerful feature in Angular that allow you to transform data directly in your templates. They are used to format, filter, and manipulate data before displaying it to the user. Angular provides several built-in pipes for common use cases, and you can also create custom pipes to meet your specific needs. In this article, we’ll explore the different types of pipes in Angular, how to use them, and how to create custom pipes. By the end of this guide, you’ll have a solid understanding of how to use pipes effectively in your Angular applications.

What are Pipes?

Pipes are simple functions that take an input value and return a transformed value. They are used in templates to format data, such as dates, numbers, and strings, without modifying the underlying data in the component. Pipes are easy to use and can be chained together to apply multiple transformations.

Built-in Pipes

Angular provides several built-in pipes for common use cases. Let’s explore some of the most commonly used ones:

1. DatePipe

The DatePipe is used to format dates according to locale rules.

<p>{{ today | date: 'fullDate' }}</p>

In the component class:

export class AppComponent {
  today = new Date();
}

Output:

<p>Monday, January 1, 2023</p>

2. UpperCasePipe and LowerCasePipe

The UpperCasePipe and LowerCasePipe are used to transform text to uppercase or lowercase.

<p>{{ 'hello' | uppercase }}</p>
<p>{{ 'WORLD' | lowercase }}</p>

Output:

<p>HELLO</p>
<p>world</p>

3. CurrencyPipe

The CurrencyPipe is used to format numbers as currency.

<p>{{ price | currency: 'USD' }}</p>

In the component class:

export class AppComponent {
  price = 100;
}

Output:

<p>$100.00</p>

4. DecimalPipe

The DecimalPipe is used to format numbers with decimal points.

<p>{{ pi | number: '1.2-2' }}</p>

In the component class:

export class AppComponent {
  pi = 3.14159;
}

Output:

<p>3.14</p>

5. PercentPipe

The PercentPipe is used to format numbers as percentages.

<p>{{ completion | percent }}</p>

In the component class:

export class AppComponent {
  completion = 0.75;
}

Output:

<p>75%</p>

Chaining Pipes

You can chain multiple pipes together to apply multiple transformations to the same data. For example, you can format a date and then convert it to uppercase:

<p>{{ today | date: 'fullDate' | uppercase }}</p>

Output:

<p>MONDAY, JANUARY 1, 2023</p>

Creating Custom Pipes

In addition to built-in pipes, Angular allows you to create custom pipes to meet your specific needs. Let’s walk through the process of creating a custom pipe.

Step 1: Generate the Pipe

Use the Angular CLI to generate a new pipe:

ng generate pipe reverse

This command generates a new pipe file (reverse.pipe.ts) with the following structure:

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Step 2: Implement the Pipe

Modify the pipe to reverse a string:

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Step 3: Use the Pipe

Apply the pipe to a string in your template:

<p>{{ 'hello' | reverse }}</p>

Output:

<p>olleh</p>

Secrets and Hidden Facts

• Pure vs. Impure Pipes: Pipes are pure by default, meaning they are only re-evaluated when the input value changes. You can make a pipe impure by setting the pure property to false.
• Parameterized Pipes: Pipes can accept parameters to customize their behavior. For example, the date pipe accepts a format string.
• Performance Considerations: Be cautious when using impure pipes, as they can impact performance if overused.

Conclusion

Pipes are a powerful feature in Angular that allow you to transform data directly in your templates. By understanding how to use built-in pipes and create custom pipes, you can format, filter, and manipulate data with ease. Whether you’re working with dates, numbers, or custom transformations, pipes are an essential tool for Angular development.

So, start experimenting with pipes in your projects and unlock the full potential of Angular!