Parameterized pipes in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Output of parameterized pipe with multiple parameters

Given the Angular pipe usage below, what will be the rendered output?

{{ 12345 | customFormat:'prefix':'suffix' }}

Assume the customFormat pipe adds the prefix and suffix strings around the number.

Angular

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

@Pipe({name: 'customFormat'})
export class CustomFormatPipe implements PipeTransform {
  transform(value: number, prefix: string, suffix: string): string {
    return `${prefix}${value}${suffix}`;
  }
}

A 12345prefixsuffix

B 12345

C prefix 12345 suffix

D prefix12345suffix

💡 Hint

Remember the pipe parameters are passed in order after the value.

The pipe receives the value 12345 and parameters 'prefix' and 'suffix'. It returns the string with prefix + value + suffix concatenated without spaces.

📝 Syntax

intermediate

Correct syntax for passing multiple parameters to a pipe

Which of the following Angular template expressions correctly passes two parameters to a pipe named examplePipe?

A {{ value | examplePipe:param1:param2 }}

B {{ value | examplePipe:(param1, param2) }}

C {{ value | examplePipe[param1, param2] }}

D {{ value | examplePipe:param1;param2 }}

💡 Hint

Angular pipes accept parameters separated by colons.

Angular pipes accept multiple parameters separated by colons. Parentheses or brackets are not used for parameters in template expressions.

🔧 Debug

advanced

Why does this parameterized pipe produce unexpected output?

Consider this pipe code:

transform(value: string, prefix?: string, suffix?: string): string {
  return prefix + value + suffix;
}

When used as {{ 'test' | myPipe }}, it produces unexpected output ('undefinedtestundefined'). Why?

A The pipe transform method must always return a number, not string

B The pipe must have at least one parameter, so calling without parameters is invalid

C prefix and suffix are undefined, so concatenation includes the string 'undefined'

D Angular does not allow optional parameters in pipes

💡 Hint

Think about what happens when undefined is concatenated with strings.

When no parameters are passed, `prefix` and `suffix` are `undefined`. Concatenating `undefined` with strings in JavaScript results in the string 'undefined' being concatenated, producing 'undefinedtestundefined'. This leads to unexpected output.

❓ state_output

advanced

Output of pipe with parameter changing dynamically

In an Angular component template:

{{ value | repeat:times }}

where value = 'ha' and times is a component property starting at 2.

If times changes to 3, what is the new output?

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);
  }
}

A haha

B hahaha

C ha3

D ha ha ha

💡 Hint

The repeat method repeats the string the given number of times without spaces.

When times is 3, value.repeat(3) returns 'hahaha' (ha repeated 3 times).

🧠 Conceptual

expert

Why use parameterized pipes instead of multiple pipes?

Which is the main advantage of using a parameterized pipe over chaining multiple pipes in Angular?

A It reduces template complexity by handling variations inside one pipe instead of multiple pipes

B Angular does not support chaining multiple pipes in templates

C Multiple pipes cannot accept parameters, only parameterized pipes can

D Parameterized pipes run faster because they are compiled differently

💡 Hint

Think about template readability and maintainability.

Parameterized pipes allow passing arguments to customize behavior inside one pipe, reducing the need to chain many pipes and making templates cleaner and easier to maintain.

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