Pure v/s Impure pipe

In Angular, pipes are used to transform data in templates. There are two types of pipes: pure and impure. Here's a comparison:

Pure Pipes

• Stateless: Pure pipes do not maintain any internal state.
• Performance: They are more efficient because Angular only calls them when it detects a pure change to the input value (e.g., a change in primitive values or object references).
• Usage: Suitable for transformations that depend solely on the input value and do not rely on external factors.

Example:

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

@Pipe({
  name: 'purePipe',
  pure: true
})
export class PurePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Transformation logic here
    return transformedValue;
  }
}

Impure Pipes

• Stateful: Impure pipes can maintain internal state and may depend on external factors.
• Performance: They are less efficient because Angular calls them on every change detection cycle, regardless of whether the input value has changed.
• Usage: Suitable for transformations that depend on external factors or need to be updated frequently.

Example:

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

@Pipe({
  name: 'impurePipe',
  pure: false
})
export class ImpurePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Transformation logic here
    return transformedValue;
  }
}

When to Use Each

• Use Pure Pipes for most cases where the transformation depends only on the input value.
• Use Impure Pipes when the transformation depends on external factors or needs to be recalculated frequently.