Creating custom pipes in Angular - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this custom pipe usage?

Given the Angular pipe below and its usage in a template, what will be displayed?

Angular

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

// Template usage:
// {{ 'hello' | reverse }}

A HELLO

B hello

C olleh

D error: pipe not found

💡 Hint

Think about what the pipe does to the input string.

The custom pipe named 'reverse' takes the input string and reverses its characters. So 'hello' becomes 'olleh'.

📝 Syntax

intermediate

Which option correctly defines a pure custom pipe?

Select the correct Angular pipe definition that creates a pure pipe named 'capitalize'.

A

@Pipe({ name: 'capitalize', pure: true })
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

B

@Pipe({ name: 'capitalize', pure: 'true' })
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

C

@Pipe({ name: 'capitalize' })
export class CapitalizePipe {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

D

@Pipe({ name: 'capitalize', pure: false })
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

💡 Hint

Pure pipes have pure: true and implement PipeTransform interface.

Option A correctly sets pure: true (boolean) and implements PipeTransform. Option A sets pure: false (impure pipe). Option A misses implementing PipeTransform. Option A uses a string 'true' instead of boolean true.

🔧 Debug

advanced

Why does this custom pipe cause a runtime error?

Examine the pipe code below. What causes the runtime error when used in a template?

Angular

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

@Pipe({ name: 'double' })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

// Template usage:
// {{ '5' | double }}

A The pipe is missing the @Injectable decorator.

B The pipe expects a number but receives a string, causing NaN result.

C The pipe name 'double' is reserved and cannot be used.

D The transform method is missing a return statement.

💡 Hint

Check the input type and what the template passes.

The pipe expects a number input but the template passes a string '5'. Multiplying a string by 2 results in NaN in JavaScript/TypeScript.

❓ state_output

advanced

What is the output when using this impure pipe with changing input?

Consider the impure pipe below and its usage in a component template. What will be the displayed output after the component's 'counter' property increments?

Angular

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

@Pipe({ name: 'addRandom', pure: false })
export class AddRandomPipe implements PipeTransform {
  transform(value: number): number {
    return value + Math.floor(Math.random() * 10);
  }
}

// Component template:
// {{ counter | addRandom }}

// Initial counter = 5
// After increment, counter = 6

A The displayed number is always counter + 0.

B The displayed number stays the same because pipe is pure by default.

C The pipe throws an error because Math.random() is not allowed.

D The displayed number changes each time counter changes because pipe is impure.

💡 Hint

Impure pipes run on every change detection cycle.

Impure pipes run every time Angular detects changes, so the random addition recalculates and changes output when 'counter' changes.

🧠 Conceptual

expert

Which statement about Angular custom pipes is TRUE?

Select the only true statement about Angular custom pipes.

A Custom pipes must implement PipeTransform and have a transform method.

B Pure pipes run on every change detection cycle regardless of input changes.

C Impure pipes run only once when the component initializes.

D Pipes can modify component class properties directly.

💡 Hint

Think about the pipe interface and lifecycle.

Custom pipes must implement PipeTransform interface and define a transform method. Impure pipes run on every change detection, pure pipes run only when inputs change. Pipes cannot modify component properties directly.