Creating custom pipes in Angular - Visual Walkthrough

Concept Flow - Creating custom pipes

Define Pipe Class with @Pipe

↓

Implement transform() method

↓

Use Pipe in Template with | operator

↓

Angular calls transform() with input

↓

Pipe returns transformed output

↓

Template displays transformed value

This flow shows how Angular uses a custom pipe: define it, implement transform(), use it in template, Angular calls transform(), and displays the result.

Execution Sample

Angular

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

@Pipe({name: 'exclaim'})
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

This code defines a custom pipe named 'exclaim' that adds an exclamation mark to a string.

Execution Table

Step	Action	Input to transform()	Output from transform()	Template Display
1	Angular finds 'exclaim' pipe in template	Hello	N/A	N/A
2	Angular calls transform() with 'Hello'	Hello	Hello!	N/A
3	Pipe returns 'Hello!'	Hello	Hello!	N/A
4	Template displays transformed value	Hello	Hello!	Hello!

💡 Pipe transform() returns output, template shows transformed string.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
value	undefined	Hello	Hello	Hello
transformedValue	undefined	Hello!	Hello!	Hello!

Key Moments - 3 Insights

Why do we need to implement the transform() method?

Because Angular calls transform() to get the transformed output for the pipe, as shown in execution_table step 2 and 3.

How does Angular know which pipe to use in the template?

Angular matches the pipe name in the template (like | exclaim) to the @Pipe decorator's name property, as seen in execution_table step 1.

What happens if transform() returns the same value?

The template will display the original value unchanged, since transform() output is what is shown, as in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the output from transform() when input is 'Hello'?

A 'Hello!'

B 'Hello'

C '!Hello'

D 'Hello!!'

💡 Hint

Check the 'Output from transform()' column at step 2 and 3.

At which step does Angular display the transformed value in the template?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Look at the 'Template Display' column in the execution table.

If transform() returned the input unchanged, what would the template display?

A An error message

B The input value unchanged

C An empty string

D The pipe name

💡 Hint

Refer to key_moments about transform() output and template display.

Concept Snapshot

Creating custom pipes in Angular:
- Define a class with @Pipe decorator and a unique name
- Implement transform(input) method to change input
- Use pipe in template with | pipeName
- Angular calls transform() and shows returned value
- Pipes help format or transform data in templates easily

Full Transcript

Creating custom pipes in Angular involves defining a class with the @Pipe decorator and a unique name. This class must implement the transform() method, which takes an input and returns a transformed output. In the template, you use the pipe with the | operator and the pipe's name. Angular calls the transform() method with the input value and uses the returned output to display in the template. For example, a pipe named 'exclaim' adds an exclamation mark to a string. The execution flow starts with Angular finding the pipe in the template, calling transform(), getting the transformed value, and finally displaying it. Variables like the input value and transformed output change during these steps. Understanding when Angular calls transform() and how the template updates helps avoid confusion. If transform() returns the input unchanged, the template shows the original value. This simple pattern lets you create reusable data transformations in your Angular apps.

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