Loquero, Rodney I.'s Blog
Angular Pipes

Angular Pipes

Loquero, Rodney I.'s photo
Loquero, Rodney I.
·

2 min read

In Angular, Pipes are a way to transform data in templates directly. They act as simple functions that take input data, apply some form of transformation, and then return the transformed data, making them highly useful for formatting values in the view layer without modifying the underlying data.

Purpose of Angular Pipes:

Data Transformation:

Pipes format data in a more human-readable or application-specific way, such as formatting dates, numbers, or strings.

Separation of Logic:

By separating transformation logic from the component, pipes promote cleaner templates and reusable code.

Declarative Approach:

Pipes make it easier to manipulate the appearance of data without having to write logic inside components.

How Pipes Work:

  • Pipes are used in templates with the pipe (|) symbol.

For example: {{ month | day}}

Built-in Pipes in Angular

Angular comes with a variety of built-in pipes that cover common data transformation needs:

  • uppercase/lowercase: Converts text to uppercase or lowercase.

  • percent: Formats numbers as percentages.

  • date: Formats dates according to locale settings or specified formats.

  • currency: Formats numbers as currency, with customizable currency symbols.

  • json: Converts objects to JSON format for debugging.

  • keyvalue: Transforms objects into key-value pairs.

  • slice: Extracts a subset of an array or string.

  • async: Handles asynchronous data, updating views with new data as it arrives.

Creating Custom Pipes:

When built-in pipes don’t meet the specific requirements, you can create custom pipes.

Custom Pipe Example

A custom 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('');

}

}

Use Cases of Angular Pipes

Practical Use Cases:

Formatting Dates: Displaying dates in a user-friendly format for invoices, event listings, etc.

  • Example: {{ eventDate | date:'shortDate' }} for showing a date in a concise format like 1/1/24.

Currency Conversion: Showing product prices in a specific currency format.

  • Example: {{ product.price | currency:'EUR' }} to display €1,000.00.

Text Transformation: Converting user input or labels to uppercase or lowercase.

  • Example: {{ userInput | uppercase }} to automatically convert text to uppercase.

Dynamic Data Transformation: Pipes are commonly used in forms, user-generated content, or data streams to dynamically adjust the display format.

Example:

  • Converting user ratings from decimals to percentages using {{ rating | percent }}.

  • Convert a timestamp to a human-readable date.

    {{ post.timestamp | date:'short' }} <!-- Displays: 1/1/24, 12:00 AM -->

  • For analytics or financial dashboards, where precise numbers are important.

    {{ sales | number:'1.0-0' }} Displays: 1,000

References:

https://angular.io/guide/pipes

https://angular.io/api/common/CurrencyPipe

https://www.ngdevelop.tech/angular/pipes/

https://angularinsights.substack.com/p/mastering-angular-pipes-transforming

Angular