Understanding Angular Pipes

Angular Pipes are a powerful feature that allows developers to transform data in templates. They enable the formatting of data for display in a more readable or presentable way without altering the original data.

Key Concepts

• What is a Pipe?
  • A pipe is a simple function that takes in data as input and transforms it to display in a different format in the view.
  • Angular provides several built-in pipes for common transformations, including:
    • DatePipe: Formats a date value.
    • CurrencyPipe: Formats a number as currency.
    • DecimalPipe: Formats a number with decimal points.
    • PercentPipe: Formats a number as a percentage.
    • JsonPipe: Converts an object to a JSON string for display.
  • Using Pipes
    • Pipes can be used in Angular templates with the pipe operator (|).
    • Syntax: {{ value | pipeName: pipeArgument }}
  • Developers can create custom pipes by implementing the PipeTransform interface.
  • Custom pipes are useful for specific transformations not covered by built-in pipes.

DecimalPipe Example

<p>{{ numberValue | number:'1.1-2' }}</p>

This formats numberValue to show at least 1 digit before the decimal point and 1 to 2 digits after.

CurrencyPipe Example

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

This formats the price variable as currency in USD with two decimal places.

DatePipe Example

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

This displays the current date in a full date format.

Built-in Pipes

Examples of Using Pipes

Custom Pipes

Example of a Custom Pipe

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

@Pipe({ name: 'exclamation' })
export class ExclamationPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

Usage:

<p>{{ 'Hello' | exclamation }}</p>

This would output: Hello!

Conclusion

Angular Pipes are essential for formatting and transforming data in your application’s templates. They help keep your templates clean and your data presentation consistent. Understanding how to use both built-in and custom pipes will enhance your Angular development skills.