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.

Practice

1. What is the main purpose of creating a custom pipe in Angular?

easy

A. To manage component lifecycle hooks

B. To handle HTTP requests

C. To define routing paths

D. To transform data in templates for display

Solution

1. Step 1: Understand the role of pipes in Angular

   Pipes are used to transform data before displaying it in templates.

2. Step 2: Identify what custom pipes do

   Custom pipes let you create your own data transformations to keep templates clean and reusable.

3. Final Answer:

   To transform data in templates for display -> Option D

4. Quick Check:

   Custom pipes = transform data [OK]

Hint: Pipes change how data looks in templates [OK]

Common Mistakes:

• Confusing pipes with services
• Thinking pipes handle HTTP or routing
• Mixing pipes with component lifecycle

2. Which of the following is the correct way to define a custom pipe class in Angular?

easy

A. export class MyPipe implements PipeTransform { transform(value: any): any { return value; } }

B. export class MyPipe { transform(value: any): any { return value; } }

C. export function MyPipe(value: any): any { return value; }

D. export class MyPipe implements OnInit { transform(value: any): any { return value; } }

Solution

1. Step 1: Recall Angular pipe class requirements

   A custom pipe class must implement the PipeTransform interface and define a transform method.

2. Step 2: Check each option

   export class MyPipe implements PipeTransform { transform(value: any): any { return value; } } correctly implements PipeTransform and has transform method. export class MyPipe { transform(value: any): any { return value; } } misses interface. export function MyPipe(value: any): any { return value; } is a function, not a class. export class MyPipe implements OnInit { transform(value: any): any { return value; } } wrongly implements OnInit instead of PipeTransform.

3. Final Answer:

   export class MyPipe implements PipeTransform { transform(value: any): any { return value; } } -> Option A

4. Quick Check:

   Pipe class implements PipeTransform [OK]

Hint: Custom pipes must implement PipeTransform interface [OK]

Common Mistakes:

• Forgetting to implement PipeTransform
• Using a function instead of a class
• Implementing wrong interfaces like OnInit

3. Given this custom pipe code, what will be the output of {{ 'hello' | exclaim }} if the pipe is defined as:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'exclaim' })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

medium

A. Error: Pipe not found

B. hello

C. hello!

D. !hello

Solution

1. Step 1: Understand the transform method behavior

   The transform method appends an exclamation mark to the input string.

2. Step 2: Apply the pipe to the input 'hello'

   Input 'hello' becomes 'hello!' after transformation.

3. Final Answer:

   hello! -> Option C

4. Quick Check:

   Input + '!' = hello! [OK]

Hint: transform method output is what pipe shows [OK]

Common Mistakes:

• Ignoring the transform method logic
• Assuming pipe adds prefix instead of suffix
• Not registering the pipe in module (causing errors)

4. What is wrong with this custom pipe code?

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'reverse' })
export class ReversePipe {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

medium

A. The class does not implement PipeTransform interface

B. The transform method is missing

C. The pipe name is invalid

D. The split method cannot be used on strings

Solution

1. Step 1: Check class declaration

   The class ReversePipe does not implement PipeTransform interface, which is required for custom pipes.

2. Step 2: Verify transform method presence

   The transform method exists and is correctly implemented.

3. Final Answer:

   The class does not implement PipeTransform interface -> Option A

4. Quick Check:

   Pipe class must implement PipeTransform [OK]

Hint: Always implement PipeTransform for custom pipes [OK]

Common Mistakes:

• Omitting PipeTransform interface
• Misnaming the transform method
• Incorrect pipe decorator usage

5. You want to create a custom pipe that formats a number to show 'Even' if the number is even, 'Odd' if odd, and 'Zero' if zero. Which transform method implementation is correct?

hard

A. transform(value: number): string { return value % 2 === 0 ? 'Even' : 'Odd'; }

B. transform(value: number): string { if (value === 0) return 'Zero'; return value % 2 === 0 ? 'Even' : 'Odd'; }

C. transform(value: number): string { if (value === 0) return 'Odd'; else return 'Even'; }

D. transform(value: number): string { if (value) return 'Even'; else return 'Zero'; }

Solution

1. Step 1: Handle zero case explicitly

   Zero is a special case and must return 'Zero'.

2. Step 2: Check even or odd for other numbers

   Use modulo operator to check if number is even or odd and return accordingly.

3. Final Answer:

   transform(value: number): string { if (value === 0) return 'Zero'; return value % 2 === 0 ? 'Even' : 'Odd'; } -> Option B

4. Quick Check:

   Zero check first, then even/odd [OK]

Hint: Check zero before even/odd to avoid wrong output [OK]

Common Mistakes:

• Not handling zero separately
• Returning wrong labels for zero
• Using incorrect conditions for even/odd