Pure vs Impure Pipe in Angular: Key Differences and Usage

In Angular, a pure pipe runs only when its input changes by reference, making it efficient for immutable data. An impure pipe runs on every change detection cycle, even if the input reference is the same, useful for mutable or frequently changing data.

Quick Comparison

This table summarizes the main differences between pure and impure pipes in Angular.

Factor	Pure Pipe	Impure Pipe
Change Detection Trigger	Runs only when input reference changes	Runs on every change detection cycle
Performance	More efficient, less CPU usage	Less efficient, can slow app if overused
Use Case	Immutable data or simple transformations	Mutable data or frequent updates
Default Behavior	Yes, pipes are pure by default	No, must set explicitly with pure: false
Example Scenario	Formatting a date or currency	Filtering a list that changes frequently

Key Differences

Pure pipes in Angular are optimized to run only when their input values change by reference. This means if you pass an object or array and its reference stays the same, the pipe will not run again, even if the contents inside change. This behavior makes pure pipes very efficient for performance because Angular skips unnecessary recalculations during change detection.

On the other hand, impure pipes run every time Angular runs change detection, regardless of whether the input reference has changed. This is useful when dealing with mutable objects or data that changes frequently without changing its reference, such as arrays that are modified in place. However, impure pipes can cause performance issues if used excessively because they run very often.

By default, Angular pipes are pure. To create an impure pipe, you must set pure: false in the pipe's decorator. Choosing between pure and impure pipes depends on your data's mutability and how often it updates.

Code Comparison

This example shows a pure pipe that filters a list of items. It only runs when the input array reference changes.

typescript

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

@Pipe({
  name: 'pureFilter'
})
export class PureFilterPipe implements PipeTransform {
  transform(items: string[], searchText: string): string[] {
    if (!items || !searchText) {
      return items;
    }
    return items.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
  }
}

Output

Filters the list only when the array reference or searchText changes.

Impure Pipe Equivalent

This impure pipe version runs on every change detection cycle, even if the input array reference is the same.

typescript

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

@Pipe({
  name: 'impureFilter',
  pure: false
})
export class ImpureFilterPipe implements PipeTransform {
  transform(items: string[], searchText: string): string[] {
    if (!items || !searchText) {
      return items;
    }
    return items.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
  }
}

Output

Filters the list on every change detection cycle, regardless of input reference.

When to Use Which

Choose a pure pipe when your data is immutable or when you want to optimize performance by avoiding unnecessary recalculations. Pure pipes are ideal for formatting data like dates, currencies, or static lists.

Choose an impure pipe when your data changes frequently without changing its reference, such as arrays or objects that are mutated in place. Use impure pipes sparingly because they can degrade performance if overused.

In general, prefer pure pipes and only use impure pipes when you have a clear need to detect internal changes of mutable data.

Key Takeaways

Pure pipes run only when input references change, making them efficient for immutable data.

Impure pipes run on every change detection cycle, useful for mutable or frequently changing data.

Angular pipes are pure by default; set pure: false to make a pipe impure.

Use pure pipes for formatting and static data, impure pipes for dynamic, mutable data.

Overusing impure pipes can hurt app performance due to frequent recalculations.