Angular Pipes and Pure Pipes.

Credits from geeksforgeeks

Angular pipes are a powerful feature used for transforming and formatting data within templates. They allow developers to manipulate data before displaying it to users, providing a convenient way to modify values without altering the underlying data.

Angular Pipes:

Angular comes with several built-in pipes like DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, and more. These pipes offer various transformations and formatting options, making it easy to display data in the desired format.

Example: DatePipe Suppose you have a date object in your component:

export class AppComponent {
  currentDate: Date = new Date();
}

In the template, you can use the DatePipe to format and display the date:

<p>Current Date: {{ currentDate | date }}</p>
<!-- Output: Current Date: Dec 24, 2023 -->

Pure Pipes:

By default, Angular pipes are stateless and re-run on every change detection cycle, potentially causing performance issues in certain scenarios. However, pure pipes help mitigate this by executing transformations only when the input value changes. You can create your custom pure pipes by implementing the PipeTransform interface.

Example: Custom Pure Pipe Let’s create a simple pure pipe to convert a string to uppercase:

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

@Pipe({
  name: 'customUppercase',
  pure: true // Set pipe to be pure
})
export class CustomUppercasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

In the template, use the custom pipe:

<p>Original Text: {{ text }}</p>
<p>Uppercase Text: {{ text | customUppercase }}</p>
<!-- Assuming text = 'Angular Pipes' -->
<!-- Output: Original Text: Angular Pipes -->
<!-- Output: Uppercase Text: ANGULAR PIPES -->

The pure: true setting ensures that the transformation occurs only when the text value changes, optimizing performance.

Real-time Example:

Let’s say you have a list of products with their prices in cents, and you want to display these prices in dollars and cents format using a custom pipe:

export class Product {
  name: string;
  priceInCents: number;

  constructor(name: string, priceInCents: number) {
    this.name = name;
    this.priceInCents = priceInCents;
  }
}

Create a custom pipe to convert price in cents to dollars and cents format:

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

@Pipe({
  name: 'centToDollar'
})
export class CentToDollarPipe implements PipeTransform {
  transform(value: number): string {
    const dollars = Math.floor(value / 100);
    const cents = value % 100;
    return `$${dollars}.${cents.toString().padStart(2, '0')}`;
  }
}

In the template, utilize the custom pipe to display prices:

<ul>
  <li *ngFor="let product of products">
    {{ product.name }} - {{ product.priceInCents | centToDollar }}
  </li>
</ul>

Suppose you have an array of Product objects:

export class AppComponent {
  products: Product[] = [
    new Product('Shirt', 2499),
    new Product('Jeans', 3999),
    new Product('Shoes', 5999)
  ];
}

The centToDollar pipe converts the price in cents to a readable dollar format for each product, making the display more user-friendly.

Pipes, especially pure pipes, are invaluable tools for data transformation and presentation in Angular applications, offering flexibility and efficiency in handling data output.

Thanks for your support, Happy Reading.