Understanding Pure and Impure Pipes in Angular

Pure and Impure Pipes in Angular

Angular is a popular framework for building dynamic, single-page applications (SPAs). One of the key features of Angular is its use of pipes, which allow developers to easily transform and format data displayed in templates.

However, not all pipes are created equal.

In this article, we will explore the differences between pure and impure pipes and how they can impact the performance of your Angular application.

What are Pipes in Angular?

Pipes in Angular are simple functions that take an input value and return a transformed output value.

They can be used to change the case of a string, format a date, or perform calculations on a number.

Let's see an example of a Pipe in Angular:

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

@Pipe({
  name: "pluralRules",
})
export class RelativeTimeFormatPipe implements PipeTransform {
  transform(value: number): ReturnType<Intl.PluralRules["select"]> | string {
    try {
      return new Intl.PluralRules('en-US').select(value);
    } catch (e) {
      return String(value);
    }
  }
}

In this example I used Intl.PluralRules to transform numbers in words, like 1, 2 to one, two or many. See the documentation page for more details on how PluralRules works.

This is an example I took from a collection of pipes for Angular applications that use the Intl API.

Let's get back to our Pipe!

An Angular Pipe must implement the PipeTransform interface from @angular/core package, it says that the class must have a transform method and must return something, in our case, the pipe returns the returned type of Intl.PluralRules["select"] or a string in case of error.

Let's take a look at how to use the pipe in templates:

<strong>{{1 | pluralRules}}</strong>

The result will be - one.

By default, a pipe created by Angular CLI is pure, what this means? Read further!

Pure vs Impure Pipes

In Angular, pipes are classified as pure and impure.

Pure pipes are only executed when the input value changes, while impure pipes are executed on every change detection cycle, regardless of whether the input value has changed.

How do we change or inform Angular whether the Pipe is pure or impure? It's very easy, we must add pure: true|false to the @Pipe decorator.

When pure: true the Pipe is pure and pure: false the Pipe is impure.

Let's change our example to mark pluralRules as impure:

@Pipe({
  name: "pluralRules",
  pure: false // or true which is also by default
})

Simple, huh?

What are Pure Pipes in Angular?

Pure pipes are the default type of pipe in Angular and are optimized for performance. They are only executed when the input value changes, meaning they are not executed on every change detection cycle.

In our case when 1 from {{1 | pluralRules}} is changed, a pure pipe will call the transform method and alter what we see based on changes.

What are Impure Pipes in Angular?

Impure pipes, on the other hand, are executed on every change detection cycle, regardless of whether the input value has changed.

Impure pipes are useful when the output is dependent on some external state or value is a composite object.

In our case, the pluralRules pipe will call transform method no matter whether 1 was changed or not.

Choosing the Right Pipe

When deciding whether to use a pure or impure pipe, it's important to understand whether value should be checked on every change detection cycle or not.

In general, you should avoid impure pipes, if an impure pipe contains heavy logic, it will degrade the application’s performance.


In conclusion, understanding the difference between pure and impure pipes in Angular is crucial for building efficient and high-performing applications.

Pure pipes are optimized for performance and are the default type of pipe in Angular, while impure pipes are executed on every change detection cycle, despite of whether the input value has changed.