Creating custom pipes in Angular - Quick Revision & Summary

Recall & Review

beginner

What is a custom pipe in Angular?

A custom pipe is a way to transform data in templates using your own logic. It lets you format or change data display without changing the original data.

beginner

How do you create a custom pipe class in Angular?

You create a class with the @Pipe decorator and implement the PipeTransform interface with a transform() method that changes the input value.

beginner

What does the transform() method do in a custom pipe?

It takes the input value and optional parameters, then returns the transformed output to display in the template.

beginner

How do you use a custom pipe in an Angular template?

Use the pipe symbol (|) followed by the pipe name, like {{ value | pipeName }} to apply the transformation.

intermediate

Why should pipes be pure by default in Angular?

Pure pipes run only when input changes, making apps faster by avoiding unnecessary recalculations.

What decorator do you use to define a custom pipe in Angular?

A @Pipe

B @Component

C @Injectable

D @Directive

The @Pipe decorator marks a class as a pipe and lets Angular know its name and metadata.

Which method must a custom pipe class implement?

A render()

B convert()

C execute()

D transform()

The transform() method is required to define how the pipe changes the input value.

How do you pass extra parameters to a custom pipe in a template?

A {{ value.pipeName(param1, param2) }}

B {{ pipeName(value, param1, param2) }}

C {{ value | pipeName:param1:param2 }}

D {{ pipeName | value:param1:param2 }}

Parameters are passed after the pipe name separated by colons.

What is the default purity setting of Angular pipes?

A Pure (runs only on input change)

B Impure (runs every change detection)

C Depends on the component

D No default, must be set manually

Pipes are pure by default to improve performance by running only when inputs change.

Where do you declare a custom pipe so Angular can use it?

A In the providers array

B In the declarations array of an NgModule

C In the bootstrap array

D In the imports array

Custom pipes must be declared in an NgModule's declarations to be available in templates.

Explain step-by-step how to create and use a custom pipe in Angular.

Think about the class, method, module, and template parts.

Why are pure pipes preferred in Angular and when might you need an impure pipe?

Consider performance and data update scenarios.