Parameterized pipes in Angular - Step-by-Step Execution

Concept Flow - Parameterized pipes

Input Value

↓

Pipe Called with Parameter

↓

Pipe Logic Uses Parameter

↓

Transformed Output

↓

Display in Template

The input value flows into the pipe, which uses the passed parameter to transform it, then outputs the result to the template.

Execution Sample

Angular

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

@Pipe({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times > 0 ? times : 0);
  }
}

This pipe repeats a string a given number of times using a parameter.

Execution Table

Step	Input Value	Parameter (times)	Pipe Logic	Output
1	'Hi'	1	Repeat 'Hi' 1 time	'Hi'
2	'Hi'	2	Repeat 'Hi' 2 times	'HiHi'
3	'Hi'	3	Repeat 'Hi' 3 times	'HiHiHi'
4	'Hi'	0	Repeat 'Hi' 0 times	'' (empty string)
5	'Hi'	-1	Repeat 'Hi' -1 times (invalid, treated as 0)	'' (empty string)

💡 All transformations complete; output depends on parameter value.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5
value	'Hi'	'Hi'	'Hi'	'Hi'	'Hi'	'Hi'
times	undefined	1	2	3	0	-1
output	undefined	'Hi'	'HiHi'	'HiHiHi'	''	''

Key Moments - 2 Insights

Why does the output become an empty string when the parameter is 0 or negative?

Because the repeat method repeats the string zero or negative times, which results in an empty string as shown in execution_table rows 4 and 5.

How does Angular know to pass the parameter to the pipe?

Angular passes parameters after the first argument automatically when you use the pipe syntax with a colon, as seen in the pipe logic step in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output when the parameter 'times' is 2?

A 'HiHi'

B 'Hi'

C 'HiHiHi'

D '' (empty string)

💡 Hint

Check the row where Parameter (times) is 2 in the execution_table.

At which step does the output become an empty string?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at the Output column in execution_table for empty string values.

If the parameter 'times' is changed to 4, what would the output be?

A 'HiHi'

B 'HiHiHi'

C 'HiHiHiHi'

D 'Hi'

💡 Hint

Refer to the pattern of output in execution_table rows 1 to 3.

Concept Snapshot

Angular parameterized pipes transform input using extra arguments.
Syntax: {{ value | pipeName:parameter }}
Pipe class transform method receives parameters after value.
Use parameters to customize output dynamically.
Example: repeat pipe repeats string times times.

Full Transcript

This visual trace shows how Angular parameterized pipes work. The input value flows into the pipe, which receives a parameter to customize its transformation. For example, a repeat pipe takes a string and a number parameter to repeat the string that many times. The execution table shows each step with input, parameter, pipe logic, and output. Variables track the input value, parameter, and output after each step. Key moments clarify why zero or negative parameters produce empty strings and how Angular passes parameters to pipes. The quiz tests understanding of outputs at different parameter values. The snapshot summarizes the syntax and behavior of parameterized pipes in Angular.