Pipe performance considerations in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a pure pipe in Angular.

Angular

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

@Pipe({
  name: 'example',
  pure: [1]
})
export class ExamplePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting pure to false when you want better performance.

Omitting the pure property and expecting impure behavior.

Setting pure: true makes the pipe pure, so Angular caches its output and calls it only when input changes.

2fill in blank

medium

Complete the code to create an impure pipe in Angular.

Angular

@Pipe({
  name: 'impureExample',
  pure: [1]
})
export class ImpureExamplePipe implements PipeTransform {
  transform(value: any): any {
    return value;
  }
}

Drag options to blanks, or click blank then click option'

Atrue

Bundefined

Cfalse

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using pure: true for pipes that need to update frequently.

Not understanding the performance cost of impure pipes.

Setting pure: false makes the pipe impure, so Angular calls it on every change detection cycle.

3fill in blank

hard

Fix the error in the pipe transform method to avoid unnecessary recalculations.

Angular

transform(value: string): string {
  if (value === this.previousValue) {
    return [1];
  }
  this.previousValue = value;
  return value.toLowerCase();
}

Drag options to blanks, or click blank then click option'

Avalue

Bthis.previousValue

Cvalue.toLowerCase()

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the new value instead of the cached one.

Not storing the previous value at all.

Return the cached previous value to avoid recalculating when input hasn't changed.

4fill in blank

hard

Fill both blanks to create a pure pipe that only recalculates when input changes.

Angular

export class EfficientPipe implements PipeTransform {
  private lastValue: any;
  private lastResult: any;

  transform(value: any): any {
    if (value [1] this.lastValue) {
      return this.lastResult;
    }
    this.lastValue = value;
    this.lastResult = value [2] 10;
    return this.lastResult;
  }
}

Drag options to blanks, or click blank then click option'

A===

B+

C-

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of === for comparison.

Using - instead of + for calculation.

Use strict equality to check if input changed and add 10 to the value if changed.

5fill in blank

hard

Fill all three blanks to implement an impure pipe that recalculates on every change detection and logs the input.

Angular

export class LoggingPipe implements PipeTransform {
  transform(value: any): any {
    console.log([1]);
    const result = value [2] 5;
    return result [3] 2;
  }
}

Drag options to blanks, or click blank then click option'

Avalue

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Logging something other than the input value.

Using wrong arithmetic operators causing incorrect results.

Log the input value, add 5, then multiply by 2 to produce the result.