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
}

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

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
  }
}

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)}`;
  }
}

Hint

Add pure: true inside the @Pipe decorator object.

Practice

1. What is the main advantage of using a pure pipe in Angular?

easy

A. It runs on every change detection cycle, ensuring fresh data.

B. It runs only when its input changes, improving performance.

C. It automatically caches data on the server.

D. It allows direct DOM manipulation inside the pipe.

Solution

1. Step 1: Understand pure pipe behavior

   Pure pipes execute only when their input values change, avoiding unnecessary recalculations.

2. Step 2: Compare with impure pipes

   Impure pipes run on every change detection, which can slow the app. Pure pipes avoid this.

3. Final Answer:

   It runs only when its input changes, improving performance. -> Option B

4. Quick Check:

   Pure pipe = runs on input change only [OK]

Hint: Pure pipes run less often, so they boost speed [OK]

Common Mistakes:

• Thinking pure pipes run every change detection
• Confusing pure pipes with caching mechanisms
• Assuming pipes manipulate the DOM directly

2. Which of the following is the correct syntax to explicitly declare a pure pipe in Angular?

easy

A. @Pipe({name: 'examplePipe'}) export class ExamplePipe {}

B. @Pipe({name: 'examplePipe', pure: false}) export class ExamplePipe {}

C. @Pipe({name: 'examplePipe', pure: true}) export class ExamplePipe {}

D. @Pipe({name: 'examplePipe', impure: true}) export class ExamplePipe {}

Solution

1. Step 1: Recall pipe decorator syntax

   The @Pipe decorator accepts a 'pure' boolean property to specify pipe purity.

2. Step 2: Identify correct pure pipe declaration

   Setting pure: true declares a pure pipe. If omitted, pure defaults to true.

3. Final Answer:

   @Pipe({name: 'examplePipe', pure: true}) export class ExamplePipe {} -> Option C

4. Quick Check:

   pure: true means pure pipe [OK]

Hint: Use pure: true or omit it for pure pipes [OK]

Common Mistakes:

• Using 'impure' instead of 'pure' property
• Setting pure: false for pure pipes
• Confusing pure with impure pipe syntax

3. Given this Angular pipe usage:

{{ items | customPipe }}

Assuming customPipe is impure, what happens when Angular runs change detection but items array reference does not change?

medium

A. The pipe does not run because input reference is unchanged.

B. The pipe runs only once and caches the result.

C. Angular throws an error due to impure pipe usage.

D. The pipe runs again and recalculates output every time.

Solution

1. Step 1: Understand impure pipe behavior

   Impure pipes run on every change detection cycle regardless of input changes.

2. Step 2: Analyze effect of unchanged input reference

   Even if the input reference stays the same, impure pipes recalculate output every time.

3. Final Answer:

   The pipe runs again and recalculates output every time. -> Option D

4. Quick Check:

   Impure pipe = runs every change detection [OK]

Hint: Impure pipes run every time, ignoring input changes [OK]

Common Mistakes:

• Assuming impure pipes cache results
• Believing input reference must change for pipe to run
• Thinking Angular errors on impure pipes

4. You have a custom pipe marked as pure, but it still recalculates on every change detection. What is the most likely cause?

medium

A. The pipe input is a new object or array instance each time.

B. The pipe is missing the @Pipe decorator.

C. Angular does not support pure pipes.

D. The pipe class is not exported.

Solution

1. Step 1: Recall pure pipe trigger condition

   Pure pipes run only when their input reference changes.

2. Step 2: Identify cause of repeated recalculation

   If the input is a new object or array instance each time, the reference changes, triggering the pipe.

3. Final Answer:

   The pipe input is a new object or array instance each time. -> Option A

4. Quick Check:

   New input reference triggers pure pipe [OK]

Hint: Check if input object/array is recreated each time [OK]

Common Mistakes:

• Assuming pure pipes run without input changes
• Thinking missing decorator causes recalculation
• Believing Angular lacks pure pipe support

5. You want to optimize an Angular app that uses a pipe to filter a large list. The pipe is impure and slows the app. Which approach best improves performance?

hard

A. Convert the pipe to pure and ensure the input list reference changes only when data updates.

B. Keep the pipe impure but add console logs inside it.

C. Remove the pipe and filter the list directly in the template.

D. Use an impure pipe but call detectChanges() manually after filtering.

Solution

1. Step 1: Identify performance issue with impure pipe

   Impure pipes run every change detection, causing slowdowns with large lists.

2. Step 2: Apply optimization by using pure pipe

   Pure pipes run only when input changes. Changing input reference only on data update avoids unnecessary runs.

3. Final Answer:

   Convert the pipe to pure and ensure the input list reference changes only when data updates. -> Option A

4. Quick Check:

   Pure pipe + stable input reference = better performance [OK]

Hint: Make pipe pure and update input reference only on data change [OK]

Common Mistakes:

• Adding logs does not improve performance
• Filtering in template causes repeated recalculations
• Manually calling detectChanges() won't fix pipe slowness