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.
PermalinkPurpose 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.
PermalinkHow Pipes Work:
- Pipes are used in templates with the pipe (
|
) symbol.
For example: {{ month | day}}
PermalinkBuilt-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.
PermalinkCreating 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('');
}
}
PermalinkUse Cases of Angular Pipes
PermalinkPractical 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 like1/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