Pure vs impure pipes in Angular - Interactive 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'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting pure to false when you want a pure pipe.

Leaving pure undefined and expecting impure behavior.

Pure pipes have pure: true by default, meaning they only run when input changes.

2fill in blank

medium

Complete the code to declare 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'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using pure: true for impure pipes.

Not setting pure property at all and expecting impure behavior.

Impure pipes have pure: false, so they run on every change detection cycle.

3fill in blank

hard

Fix the error in the pipe declaration to make it impure.

Angular

@Pipe({
  name: 'fixPipe',
  pure: [1]
})
export class FixPipe 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

Leaving pure as true for impure pipes.

Using undefined or null instead of false.

To make a pipe impure, set pure: false.

4fill in blank

hard

Fill both blanks to create a pure pipe that transforms input to lowercase.

Angular

@Pipe({
  name: 'lowercase',
  pure: [1]
})
export class LowercasePipe implements [2] {
  transform(value: string): string {
    return value.toLowerCase();
  }
}

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

Atrue

Bfalse

CPipeTransform

DOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnInit instead of PipeTransform.

Setting pure to false for a pure pipe.

Pure pipes have pure: true and implement PipeTransform.

5fill in blank

hard

Fill all three blanks to create an impure pipe that reverses a string.

Angular

@Pipe({
  name: 'reverse',
  pure: [1]
})
export class ReversePipe implements [2] {
  transform(value: string): string {
    return value.split('').[3]().join('');
  }
}

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

Atrue

Bfalse

Creverse

DPipeTransform

Attempts:

3 left

💡 Hint

Common Mistakes

Setting pure to true for impure pipes.

Not implementing PipeTransform.

Using a wrong method instead of reverse().

Impure pipes have pure: false, implement PipeTransform, and use reverse() to reverse arrays.