Angular: 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.

---

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊