Pure vs impure pipes in Angular - Quick Revision & Key Differences

Recall & Review

beginner

What is a pure pipe in Angular?

A pure pipe is a pipe that Angular executes only when it detects a pure change to the input value. Pure changes include changes to primitive types or object references. Pure pipes improve performance by avoiding unnecessary recalculations.

beginner

What is an impure pipe in Angular?

An impure pipe is a pipe that Angular executes on every change detection cycle, regardless of whether the input value changed. This is useful when the pipe depends on mutable objects or external state.

intermediate

How do you declare a pipe as impure in Angular?

You declare a pipe as impure by setting the 'pure' property to false in the @Pipe decorator, like this: @Pipe({name: 'myPipe', pure: false}).

intermediate

Why should you avoid using impure pipes when possible?

Impure pipes run on every change detection cycle, which can hurt performance. Using pure pipes when possible helps Angular skip unnecessary work and keeps apps fast.

advanced

Give an example scenario where an impure pipe is necessary.

When a pipe transforms data from a mutable object like an array that changes internally (e.g., items added or removed without changing the array reference), an impure pipe ensures the view updates correctly.

When does Angular execute a pure pipe?

A When the user clicks a button

B On every change detection cycle

C Only when the input reference or primitive value changes

D Only once when the component loads

Pure pipes run only when Angular detects a pure change to the input, such as a new object reference or a changed primitive value.

How do you mark a pipe as impure in Angular?

A Use @ImpurePipe decorator

B Set pure: false in the @Pipe decorator

C Set pure: true in the @Pipe decorator

D No special setting needed

You mark a pipe as impure by setting pure: false in the @Pipe decorator.

What is a downside of using impure pipes?

A They run on every change detection cycle, which can reduce performance

B They never update the view

C They only work with primitive values

D They require manual triggering

Impure pipes run every change detection cycle, which can slow down the app if overused.

Which pipe type is best for transforming immutable data?

A Pure pipe

B Impure pipe

C Async pipe

D No pipe

Pure pipes are ideal for immutable data because they only run when the input changes.

If you have an array that changes internally but keeps the same reference, which pipe should you use?

A Pure pipe

B No pipe

C Async pipe

D Impure pipe

Impure pipes detect internal changes in mutable objects even if the reference stays the same.

Explain the difference between pure and impure pipes in Angular and when to use each.

Think about how Angular detects changes and when it runs pipes.

Describe how to declare an impure pipe and why you might need one.

Focus on the decorator setting and use case.