Pure vs impure pipes in Angular - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a pure pipe behave with unchanged input?

Consider an Angular pure pipe that transforms an input value. If the input object reference does not change, what will happen when Angular runs change detection?

A Angular throws an error because the input did not change.

B The pipe will run again and produce a new output every time.

C The pipe will not run again and the previous output is reused.

D The pipe runs only if the input value is a primitive type.

💡 Hint

Pure pipes run only when the input reference changes.

Pure pipes in Angular run only when the input reference changes. If the input object is the same (no new reference), Angular reuses the previous output to optimize performance.

❓ component_behavior

intermediate

What triggers an impure pipe to run?

An Angular impure pipe is used in a template. When does Angular call the transform method of this impure pipe?

A Every time change detection runs, regardless of input changes.

B Only when the input reference changes.

C Only when the component is initialized.

D Only when the input is a primitive value.

💡 Hint

Impure pipes run on every change detection cycle.

Impure pipes run every time Angular runs change detection, even if the input reference or value has not changed. This can impact performance if used carelessly.

❓ state_output

advanced

Output of pure pipe with mutated input object

Given a pure pipe that formats an array input, what will be the output if the array is mutated (e.g., an item is pushed) but the array reference stays the same?

Angular

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

@Pipe({ name: 'joinArray', pure: true })
export class JoinArrayPipe implements PipeTransform {
  transform(value: string[]): string {
    console.log('Pipe transform called');
    return value.join(', ');
  }
}

// In component template:
// {{ myArray | joinArray }}

// In component class:
// myArray = ['apple', 'banana'];
// After some event:
// myArray.push('cherry');

A Angular throws a runtime error because the array was mutated.

B The pipe transform method is NOT called again; output remains 'apple, banana'.

C The pipe transform method is called but output does not change.

D The pipe transform method is called again; output updates to 'apple, banana, cherry'.

💡 Hint

Pure pipes check input references, not internal mutations.

Pure pipes only run when the input reference changes. Mutating the array without changing its reference does not trigger the pipe to run again, so the output stays the same.

📝 Syntax

advanced

Correct way to declare an impure pipe

Which of the following code snippets correctly declares an Angular pipe as impure?

A

@Pipe({ name: 'examplePipe' })
export class ExamplePipe implements PipeTransform {
  transform(value: any) { return value; }
}

B

@Pipe({ name: 'examplePipe', impure: true })
export class ExamplePipe implements PipeTransform {
  transform(value: any) { return value; }
}

C

@Pipe({ name: 'examplePipe', pure: true })
export class ExamplePipe implements PipeTransform {
  transform(value: any) { return value; }
}

D

@Pipe({ name: 'examplePipe', pure: false })
export class ExamplePipe implements PipeTransform {
  transform(value: any) { return value; }
}

💡 Hint

Impure pipes are declared by setting pure to false.

To declare an impure pipe in Angular, set the pure property to false in the @Pipe decorator. The default is pure: true.

🔧 Debug

expert

Why does this impure pipe not update output?

An Angular impure pipe is used to display the length of an array. The array is mutated by pushing new items, but the displayed length does not update. What is the most likely cause?

Angular

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

@Pipe({ name: 'lengthPipe', pure: false })
export class LengthPipe implements PipeTransform {
  transform(value: any[]): number {
    return value.length;
  }
}

// In component template:
// {{ myArray | lengthPipe }}

// In component class:
// myArray = ['a', 'b'];
// someMethod() {
//   this.myArray.push('c');
// }

A The component does not trigger change detection after mutating the array.

B The transform method is missing a return statement.

C The pipe must be pure to detect mutations.

D Impure pipes do not detect changes in array length.

💡 Hint

Impure pipes run every change detection cycle, but change detection must run.

Impure pipes run every time Angular runs change detection. If the component does not trigger change detection after mutating the array, the pipe will not update the output.