Parameterized pipes in Angular - Performance & Optimization

Performance: Parameterized pipes

MEDIUM IMPACT

This affects rendering speed and responsiveness by how often Angular recalculates and updates the pipe output when parameters change.

Using a parameterized pipe to format data with changing parameters

Angular

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

@Pipe({
  name: 'expensiveFormat',
  pure: true
})
export class ExpensiveFormatPipe implements PipeTransform {
  private cachedValue = '';
  private cachedParam = 0;
  private cachedResult = '';

  transform(value: string, param: number): string {
    if (value !== this.cachedValue || param !== this.cachedParam) {
      // Expensive calculation only when inputs change
      for (let i = 0; i < 1000000; i++) {}
      this.cachedResult = value.repeat(param);
      this.cachedValue = value;
      this.cachedParam = param;
    }
    return this.cachedResult;
  }
}

// Usage in template:
// {{ someText | expensiveFormat: dynamicParam }}

Caches results and recalculates only when inputs change, reducing unnecessary work during change detection.

📈 Performance GainReduces blocking time to near zero on unchanged inputs, improving input responsiveness.

Using a parameterized pipe to format data with changing parameters

Angular

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

@Pipe({
  name: 'expensiveFormat',
  pure: true
})
export class ExpensiveFormatPipe implements PipeTransform {
  transform(value: string, param: number): string {
    // Simulate expensive calculation
    for (let i = 0; i < 1000000; i++) {}
    return value.repeat(param);
  }
}

// Usage in template:
// {{ someText | expensiveFormat: dynamicParam }}

The pipe runs on every change detection because the parameter changes frequently, causing expensive recalculations.

📉 Performance CostBlocks rendering for 10-50ms per change detection, causing input lag and slow UI updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Expensive parameterized pipe without caching	Minimal	0	High due to blocking JS	[X] Bad
Cached parameterized pipe with pure/impure flag	Minimal	0	Low, non-blocking	[OK] Good

Rendering Pipeline

Angular runs pipes during change detection. Parameterized pipes with changing inputs trigger recalculation, affecting the rendering pipeline stages.

→Change Detection

→Style Calculation

→Layout

→Paint

⚠️ BottleneckChange Detection recalculations caused by expensive pipe transforms

Core Web Vital Affected

INP

This affects rendering speed and responsiveness by how often Angular recalculates and updates the pipe output when parameters change.

Optimization Tips

1Avoid expensive calculations inside parameterized pipes that run on every change detection.

2Cache pipe results and recalculate only when input parameters change.

3Use pure pipes when possible to minimize recalculations.

Performance Quiz - 3 Questions

What is the main performance risk of using parameterized pipes in Angular?

A They block network requests during rendering.

B They can cause expensive recalculations on every change detection if parameters change frequently.

C They increase the number of DOM nodes created.

D They cause CSS recalculations on every frame.

DevTools: Performance

How to check: Record a performance profile while interacting with the UI that triggers the pipe. Look for long scripting tasks during change detection.

What to look for: Look for long 'Update View' or 'Change Detection' tasks that block the main thread and cause input lag.

Practice

1. What is the main purpose of parameterized pipes in Angular?
{{ value | pipeName:param }}

easy

A. To define routes in the application

B. To customize how data is displayed by passing extra information

C. To handle HTTP requests

D. To create new components dynamically

Solution

1. Step 1: Understand what pipes do

   Pipes transform data in templates to display it differently.

2. Step 2: Recognize parameterized pipes

   Parameterized pipes accept extra values to customize the transformation.

3. Final Answer:

   To customize how data is displayed by passing extra information -> Option B

4. Quick Check:

   Parameterized pipes = customize display [OK]

Hint: Remember pipes change display; parameters customize it [OK]

Common Mistakes:

• Confusing pipes with components
• Thinking pipes handle logic like HTTP
• Mixing pipes with routing

2. Which of the following is the correct syntax to pass a parameter to a pipe named customPipe with parameter 5?

easy

A. {{ value | customPipe:5 }}

B. {{ value | customPipe(5) }}

C. {{ value | customPipe;5 }}

D. {{ value | customPipe->5 }}

Solution

1. Step 1: Recall Angular pipe parameter syntax

   Angular pipes use colon : to separate parameters.

2. Step 2: Check each option

   Only {{ value | customPipe:5 }} uses colon correctly: | customPipe:5.

3. Final Answer:

   {{ value | customPipe:5 }} -> Option A

4. Quick Check:

   Pipe parameters use colon : [OK]

Hint: Use colon : to pass parameters to pipes [OK]

Common Mistakes:

• Using parentheses instead of colon
• Using semicolon or arrow instead of colon
• Omitting the colon

3. Given the pipe usage {{ 1234.5678 | number:'1.2-2' }}, what will be the displayed output?

medium

A. 1234.56

B. 1234.5678

C. 1,234.57

D. 1,234.5678

Solution

1. Step 1: Understand the number pipe parameter

   The parameter '1.2-2' means minimum 1 digit before decimal, 2 minimum and 2 maximum digits after decimal.

2. Step 2: Format the number 1234.5678 accordingly

   The number is rounded to 2 decimal places and includes thousand separator: '1,234.57'.

3. Final Answer:

   1,234.57 -> Option C

4. Quick Check:

   number pipe rounds decimals as per parameter [OK]

Hint: Number pipe rounds decimals between min and max digits [OK]

Common Mistakes:

• Ignoring thousand separators
• Not rounding decimals
• Confusing min and max decimal digits

4. What is wrong with this pipe usage?
{{ today | date:'yyyy-mm-dd' }}
Assuming today is a valid Date object.

medium

A. The pipe must be used with parentheses

B. The pipe name should be uppercase 'Date'

C. Date pipe does not accept format strings

D. The format string uses lowercase 'mm' which shows minutes, not months

Solution

1. Step 1: Check date format string

   In Angular date pipe, 'mm' means minutes, 'MM' means months.

2. Step 2: Identify the error

   Using 'yyyy-mm-dd' will show minutes instead of months, causing wrong output.

3. Final Answer:

   The format string uses lowercase 'mm' which shows minutes, not months -> Option D

4. Quick Check:

   Date pipe format is case-sensitive [OK]

Hint: Use uppercase MM for months in date pipe format [OK]

Common Mistakes:

• Using lowercase mm for months
• Capitalizing pipe names incorrectly
• Adding parentheses to pipes

5. You want to create a custom pipe truncate that shortens a string to a given length passed as a parameter. Which of these pipe transform method signatures correctly supports a parameter for length?

hard

A. transform(value: string, length: number): string

B. transform(value: string): string

C. transform(length: number, value: string): string

D. transform(): string

Solution

1. Step 1: Recall pipe transform method signature

   The first argument is the value, followed by optional parameters.

2. Step 2: Check parameter order and types

   transform(value: string, length: number): string correctly has value first, then length parameter.

3. Final Answer:

   transform(value: string, length: number): string -> Option A

4. Quick Check:

   Pipe transform(value, params...) signature [OK]

Hint: First argument is value, next are parameters in transform() [OK]

Common Mistakes:

• Swapping parameter order
• Omitting parameters
• Using no parameters at all