Angular Pipes Guide

Angular Pipes are a powerful feature in Angular that allows developers to transform data in templates. Pipes can be used to modify data in different ways such as formatting, filtering, and sorting. In this guide, we will cover the usage of built-in pipes such as date and currency, as well as creating custom pipes.

Built-in Pipes

Angular provides several built-in pipes that can be used to transform data in templates. The most commonly used built-in pipes are the Date Pipe and the Currency Pipe.

Date Pipe

The Date Pipe is used to format dates in Angular templates. It takes a date object as input and returns a formatted string based on the specified format. The available formats for the Date Pipe are: ‘short’, ‘medium’, ‘long’, ‘full’, ‘shortDate’, ‘mediumDate’, ‘longDate’, ‘fullDate’, ‘shortTime’, ‘mediumTime’, and ‘longTime’. Here is an example:

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

This will display the current date in the full format (e.g. Tuesday, August 31, 2021).

Currency Pipe

The Currency Pipe is used to format currency values in Angular templates. It takes a number as input and returns a formatted string based on the specified currency code. The available currency codes for the Currency Pipe are ISO 4217 currency codes such as ‘USD’, ‘EUR’, ‘JPY’, etc. Here is an example:

<p>The price is {{ price | currency:'USD':'symbol':'1.2-2' }}</p>

This will display the price in USD currency format with the currency symbol and two decimal places.

Custom Pipes

Developers can create custom pipes to transform data in a specific way. A custom pipe is a TypeScript class that implements the PipeTransform interface. A custom pipe can take one or more values as input and return a modified value. Here is an example of creating a custom pipe:

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

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

This custom pipe takes a string value as input and returns the reversed string. It can be used in an Angular template as follows:

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

This will display the string in reverse order.

Chaining Pipes

We can also chain multiple pipes together to transform data in multiple ways. Here is an example of chaining the Date Pipe and the Currency Pipe:

<p>The price on {{ today | date:'fullDate' }} is {{ price | currency:'USD':'symbol':'1.2-2' }}</p>

This will display the current date in the full format followed by the price in USD currency format with the currency symbol and two decimal places.

Conclusion

In this guide, we have covered the usage of Angular Pipes to transform data in templates. We have seen how to use built-in pipes such as date and currency, as well as creating custom pipes. We have also learned how to chain multiple pipes together to transform data in multiple ways. Pipes are a powerful feature in Angular that can simplify data manipulation and improve code readability. By using pipes, we can write cleaner and more efficient code.