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.

Practice

1. What is the main difference between a pure pipe and an impure pipe in Angular?

easy

A. Pure pipes can modify input data, impure pipes cannot.

B. Pure pipes run every change detection cycle, impure pipes run only when input references change.

C. Pure pipes run only when input references change, impure pipes run every change detection cycle.

D. Pure pipes are slower than impure pipes.

Solution

1. Step 1: Understand pure pipe behavior

   Pure pipes execute only when the input reference changes, meaning they do not run on every change detection cycle.

2. Step 2: Understand impure pipe behavior

   Impure pipes run on every change detection cycle regardless of input changes, which can impact performance.

3. Final Answer:

   Pure pipes run only when input references change, impure pipes run every change detection cycle. -> Option C

4. Quick Check:

   Pure vs impure pipe execution = A [OK]

Hint: Pure pipes run less often; impure pipes run every cycle [OK]

Common Mistakes:

• Confusing when pure and impure pipes run
• Thinking pure pipes run every cycle
• Assuming impure pipes only run on input change

2. Which of the following is the correct way to declare an impure pipe in Angular?

easy

A. @Pipe({ name: 'examplePipe', pure: false })

B. @Pipe({ name: 'examplePipe', impure: true })

C. @Pipe({ name: 'examplePipe' })

D. @Pipe({ name: 'examplePipe', pure: true })

Solution

1. Step 1: Recall pipe metadata syntax

   Angular pipes use the @Pipe decorator with a 'pure' property to indicate purity.

2. Step 2: Identify impure pipe declaration

   Setting 'pure: false' marks the pipe as impure, causing it to run every change detection cycle.

3. Final Answer:

   @Pipe({ name: 'examplePipe', pure: false }) -> Option A

4. Quick Check:

   Impure pipe uses pure: false [OK]

Hint: Impure pipes set pure to false in @Pipe decorator [OK]

Common Mistakes:

• Using pure: true for impure pipes
• Omitting pure property defaults to pure
• Using non-existent 'impure' property

3. Given this Angular pipe usage:

items = [1, 2, 3];
// Template: {{ items | customPipe }}

If customPipe is pure and the array items is mutated by items.push(4) without changing the reference, what will happen?

medium

A. The pipe will run and update the output to include 4.

B. Angular throws an error due to mutation.

C. The pipe runs only if change detection is manually triggered.

D. The pipe will not run; output remains unchanged.

Solution

1. Step 1: Understand pure pipe input change detection

   Pure pipes run only when the input reference changes, not when the content inside the object changes.

2. Step 2: Analyze mutation effect on pipe execution

   Mutating the array with push() does not change the reference, so the pure pipe does not run again and output stays the same.

3. Final Answer:

   The pipe will not run; output remains unchanged. -> Option D

4. Quick Check:

   Pure pipe ignores internal mutations = C [OK]

Hint: Pure pipes need new object references to update [OK]

Common Mistakes:

• Assuming mutation triggers pure pipe
• Thinking Angular throws error on mutation
• Believing manual change detection is required here

4. You have an Angular pipe declared as @Pipe({ name: 'filterPipe', pure: true }). It filters an array based on user input. The filtered results do not update when the user types. What is the likely cause?

medium

A. The pipe is impure and runs too often causing errors.

B. The pipe is pure and input array reference does not change on filtering.

C. The pipe is missing the transform method.

D. The pipe is declared without a name.

Solution

1. Step 1: Identify pipe purity and input behavior

   A pure pipe runs only when the input reference changes, not when the content changes.

2. Step 2: Understand why filtered results don't update

   If the array is filtered in place without creating a new array reference, the pure pipe does not detect change and does not update output.

3. Final Answer:

   The pipe is pure and input array reference does not change on filtering. -> Option B

4. Quick Check:

   Pure pipe needs new input reference to update [OK]

Hint: Pure pipes need new input references to update output [OK]

Common Mistakes:

• Assuming impure pipe causes this issue
• Forgetting to return new array reference
• Ignoring pipe naming or method errors

5. You want to create a pipe that formats the current time every second in Angular. Which pipe type should you use and why?

hard

A. Impure pipe, because it runs every change detection cycle and updates time frequently.

B. Pure pipe, because it runs only when input changes, improving performance.

C. Pure pipe, because it automatically triggers updates every second.

D. Impure pipe, because pure pipes cannot be used for formatting.

Solution

1. Step 1: Understand the need for frequent updates

   Formatting current time every second requires the pipe to run frequently to update the display.

2. Step 2: Choose pipe type based on update frequency

   Impure pipes run every change detection cycle, making them suitable for frequent updates like a clock.

3. Final Answer:

   Impure pipe, because it runs every change detection cycle and updates time frequently. -> Option A

4. Quick Check:

   Frequent updates need impure pipe [OK]

Hint: Use impure pipes for frequent, automatic updates [OK]

Common Mistakes:

• Choosing pure pipe for frequent updates
• Thinking pure pipes auto-update every second
• Confusing pipe purpose with formatting capability