Pure vs impure pipes in Angular

Introduction

Pipes help change data in templates. Pure and impure pipes decide when to update the displayed data.

When you want to format data that rarely changes, like dates or currency.

When you need to update the display every time any change happens, like filtering a list as you type.

When you want to improve app speed by avoiding unnecessary updates.

When you want to always show the latest data even if the data object reference stays the same.

Syntax

Angular

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

@Pipe({
  name: 'examplePipe',
  pure: true // or false
})
export class ExamplePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // transform logic here
    return value;
  }
}

The pure property controls if the pipe is pure (true) or impure (false).

Pure pipes run only when input references change. Impure pipes run on every change detection cycle.

Examples

This is a pure pipe. It updates only when the input string changes.

Angular

@Pipe({ name: 'purePipe', pure: true })
export class PurePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

This is an impure pipe. It updates every time Angular checks for changes.

Angular

@Pipe({ name: 'impurePipe', pure: false })
export class ImpurePipe implements PipeTransform {
  transform(value: string): string {
    return value + ' updated';
  }
}

Sample Program

This example shows two pipes: one pure and one impure. Clicking the button sets the text to the same string. The pure pipe runs only if the input reference changes, so it may not run. The impure pipe runs every time Angular checks for changes, so it always runs.

Angular

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

@Pipe({
  name: 'purePipe',
  pure: true
})
export class PurePipe implements PipeTransform {
  transform(value: string): string {
    console.log('PurePipe transform called');
    return value.toUpperCase();
  }
}

@Pipe({
  name: 'impurePipe',
  pure: false
})
export class ImpurePipe implements PipeTransform {
  transform(value: string): string {
    console.log('ImpurePipe transform called');
    return value + ' updated';
  }
}

@Component({
  selector: 'app-root',
  template: `
    <h3>Pure Pipe Output: {{ text | purePipe }}</h3>
    <h3>Impure Pipe Output: {{ text | impurePipe }}</h3>
    <button (click)="changeText()">Change Text</button>
  `
})
export class AppComponent {
  text = 'hello';

  changeText() {
    this.text = 'hello'; // same string value, new reference
  }
}

Important Notes

Pure pipes improve performance by running less often.

Impure pipes can slow down your app if overused because they run very often.

Use impure pipes only when you need to detect changes inside objects or arrays without changing their reference.

Summary

Pure pipes run only when input references change.

Impure pipes run on every change detection cycle.

Choose pure pipes for better performance and impure pipes when you need frequent updates.