Parameterized pipes in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a parameterized pipe in Angular?

A parameterized pipe is a pipe that takes one or more extra values (parameters) to customize how it transforms data before displaying it.

beginner

How do you pass parameters to a pipe in Angular template?

You pass parameters using a colon (:) after the pipe name, like this: {{ value | pipeName: param1 : param2 }}.

intermediate

Example: What does {{ 1234.56 | number:'1.0-2' }} do?

It formats the number 1234.56 to have at least 1 digit before the decimal and between 0 and 2 digits after the decimal, showing '1,234.56'.

intermediate

Why use parameterized pipes instead of multiple pipes?

Parameterized pipes let you reuse one pipe with different settings, making your code cleaner and easier to maintain.

advanced

How do you create a custom parameterized pipe in Angular?

Create a class with @Pipe decorator, implement PipeTransform, and add parameters to the transform method after the value parameter.

How do you pass a parameter to a pipe in Angular?

A Using a comma after the pipe name

B Using parentheses after the pipe name

C Using square brackets around the pipe name

D Using a colon after the pipe name

Parameters are passed to pipes using a colon (:), for example: {{ value | pipeName: param }}.

What does the transform method in a custom pipe receive?

A Only the value to transform

B Only the parameters

C The value and any parameters passed

D No arguments

The transform method receives the value first, then any parameters passed to the pipe.

Which of these is a valid way to use the Angular date pipe with a parameter?

A {{ today | date:'shortDate' }}

B {{ today | date(shortDate) }}

C {{ today | date[shortDate] }}

D {{ today | date; 'shortDate' }}

Parameters are passed as strings after a colon, so 'shortDate' must be in quotes.

Why are parameterized pipes useful?

A They make pipes slower

B They allow customizing output without writing many pipes

C They prevent pipes from working

D They are only for debugging

Parameterized pipes let you customize how data is transformed without creating many different pipes.

What decorator is used to define a pipe in Angular?

A @Pipe

B @Injectable

C @Component

D @Directive

The @Pipe decorator defines a class as an Angular pipe.

Explain how to use parameters with Angular pipes in a template.

Think about how you add extra info after the pipe name.

Describe the steps to create a custom parameterized pipe in Angular.

Focus on the class and method structure.

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