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.

Practice

1. What is the main purpose of parameterized pipes in Angular?
{{ value | pipeName:param }}

easy

A. To define routes in the application

B. To customize how data is displayed by passing extra information

C. To handle HTTP requests

D. To create new components dynamically

Solution

1. Step 1: Understand what pipes do

   Pipes transform data in templates to display it differently.

2. Step 2: Recognize parameterized pipes

   Parameterized pipes accept extra values to customize the transformation.

3. Final Answer:

   To customize how data is displayed by passing extra information -> Option B

4. Quick Check:

   Parameterized pipes = customize display [OK]

Hint: Remember pipes change display; parameters customize it [OK]

Common Mistakes:

• Confusing pipes with components
• Thinking pipes handle logic like HTTP
• Mixing pipes with routing

2. Which of the following is the correct syntax to pass a parameter to a pipe named customPipe with parameter 5?

easy

A. {{ value | customPipe:5 }}

B. {{ value | customPipe(5) }}

C. {{ value | customPipe;5 }}

D. {{ value | customPipe->5 }}

Solution

1. Step 1: Recall Angular pipe parameter syntax

   Angular pipes use colon : to separate parameters.

2. Step 2: Check each option

   Only {{ value | customPipe:5 }} uses colon correctly: | customPipe:5.

3. Final Answer:

   {{ value | customPipe:5 }} -> Option A

4. Quick Check:

   Pipe parameters use colon : [OK]

Hint: Use colon : to pass parameters to pipes [OK]

Common Mistakes:

• Using parentheses instead of colon
• Using semicolon or arrow instead of colon
• Omitting the colon

3. Given the pipe usage {{ 1234.5678 | number:'1.2-2' }}, what will be the displayed output?

medium

A. 1234.56

B. 1234.5678

C. 1,234.57

D. 1,234.5678

Solution

1. Step 1: Understand the number pipe parameter

   The parameter '1.2-2' means minimum 1 digit before decimal, 2 minimum and 2 maximum digits after decimal.

2. Step 2: Format the number 1234.5678 accordingly

   The number is rounded to 2 decimal places and includes thousand separator: '1,234.57'.

3. Final Answer:

   1,234.57 -> Option C

4. Quick Check:

   number pipe rounds decimals as per parameter [OK]

Hint: Number pipe rounds decimals between min and max digits [OK]

Common Mistakes:

• Ignoring thousand separators
• Not rounding decimals
• Confusing min and max decimal digits

4. What is wrong with this pipe usage?
{{ today | date:'yyyy-mm-dd' }}
Assuming today is a valid Date object.

medium

A. The pipe must be used with parentheses

B. The pipe name should be uppercase 'Date'

C. Date pipe does not accept format strings

D. The format string uses lowercase 'mm' which shows minutes, not months

Solution

1. Step 1: Check date format string

   In Angular date pipe, 'mm' means minutes, 'MM' means months.

2. Step 2: Identify the error

   Using 'yyyy-mm-dd' will show minutes instead of months, causing wrong output.

3. Final Answer:

   The format string uses lowercase 'mm' which shows minutes, not months -> Option D

4. Quick Check:

   Date pipe format is case-sensitive [OK]

Hint: Use uppercase MM for months in date pipe format [OK]

Common Mistakes:

• Using lowercase mm for months
• Capitalizing pipe names incorrectly
• Adding parentheses to pipes

5. You want to create a custom pipe truncate that shortens a string to a given length passed as a parameter. Which of these pipe transform method signatures correctly supports a parameter for length?

hard

A. transform(value: string, length: number): string

B. transform(value: string): string

C. transform(length: number, value: string): string

D. transform(): string

Solution

1. Step 1: Recall pipe transform method signature

   The first argument is the value, followed by optional parameters.

2. Step 2: Check parameter order and types

   transform(value: string, length: number): string correctly has value first, then length parameter.

3. Final Answer:

   transform(value: string, length: number): string -> Option A

4. Quick Check:

   Pipe transform(value, params...) signature [OK]

Hint: First argument is value, next are parameters in transform() [OK]

Common Mistakes:

• Swapping parameter order
• Omitting parameters
• Using no parameters at all