Pipe performance considerations in Angular - Mini Project: Build & Apply

Pipe performance considerations

📖 Scenario: You are building an Angular app that shows a list of products with their prices. You want to display the prices formatted as currency using a custom pipe. However, you also want to make sure your app runs smoothly without unnecessary slowdowns.

🎯 Goal: Create a simple Angular component that uses a custom currencyFormat pipe to format product prices. Learn how to optimize the pipe for better performance by using the pure option.

📋 What You'll Learn

Create a list of products with name and price

Create a custom pipe called currencyFormat that formats numbers as currency

Use the pipe in the component template to display formatted prices

Make the pipe pure to improve performance

💡 Why This Matters

🌍 Real World

Formatting prices or other data in Angular apps is common. Using pure pipes helps keep apps fast and responsive.

💼 Career

Understanding pipe performance is important for frontend developers to write efficient Angular applications.

1

DATA SETUP: Create the products list

In the Angular component class, create a variable called products that is an array of objects. Each object should have name and price properties with these exact values: { name: 'Book', price: 12.99 }, { name: 'Pen', price: 1.5 }, { name: 'Notebook', price: 5.25 }.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  // Create the products array here
}

Need a hint?

Use an array with three objects exactly as shown. Each object has name and price.

2

CONFIGURATION: Create the currencyFormat pipe

Create a new Angular pipe called currencyFormat with the decorator @Pipe. Set the pipe's name to 'currencyFormat'. For now, just create the class and the decorator without any logic inside the transform method.

Angular

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = [
    { name: 'Book', price: 12.99 },
    { name: 'Pen', price: 1.5 },
    { name: 'Notebook', price: 5.25 }
  ];
}

// Create the currencyFormat pipe here

Need a hint?

Import Pipe and PipeTransform from @angular/core. Use @Pipe decorator with name: 'currencyFormat'. Create a class CurrencyFormatPipe that implements PipeTransform with a transform method.

3

CORE LOGIC: Format the price as currency in the pipe

In the transform method of the currencyFormat pipe, return the value formatted as a string with a dollar sign and two decimals. For example, if value is 12.99, return '$12.99'. Use value.toFixed(2) to format decimals.

Angular

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = [
    { name: 'Book', price: 12.99 },
    { name: 'Pen', price: 1.5 },
    { name: 'Notebook', price: 5.25 }
  ];
}

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: number): string {
    // Format the value as currency
  }
}

Need a hint?

Use a template string to add $ before the number formatted with two decimals using toFixed(2).

4

COMPLETION: Make the pipe pure for better performance

Modify the @Pipe decorator of currencyFormat pipe to add pure: true. This makes the pipe pure and improves performance by running only when the input changes.

Angular

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = [
    { name: 'Book', price: 12.99 },
    { name: 'Pen', price: 1.5 },
    { name: 'Notebook', price: 5.25 }
  ];
}

@Pipe({
  name: 'currencyFormat',
  // Add pure: true here
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: number): string {
    return `$${value.toFixed(2)}`;
  }
}

Need a hint?

Add pure: true inside the @Pipe decorator object.