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.