Understanding Pure and Impure Pipes in Angular

Pipes are a cornerstone of Angular development, allowing you to transform data within templates for improved readability and user experience. However, not all pipes are created equal. This blog delves into the key differences between pure and impure pipes in Angular, exploring their characteristics, use cases, and performance implications.

Demystifying Pipes

Pipes in Angular are essentially functions that take data as input and manipulate it into a desired output. Angular provides a rich set of built-in pipes for common tasks like formatting dates (DatePipe), currencies (CurrencyPipe), and text casing (UpperCasePipe, LowerCasePipe). Additionally, you have the flexibility to create custom pipes for specific transformations.

Pipes are typically invoked using the pipe symbol (|) within your template. You can even chain multiple pipes to achieve a desired outcome. Here's an example:

<p>Today is {{ today | date:'fullDate' }}</p>
<p>Price is {{ price | currency: 'USD' }}</p>

In this instance, the date pipe transforms the today value into a more human-readable format ("Thursday, September 19, 2024"), while the currency pipe converts the price value into US dollars ("$4300").

Pure Pipes: Efficiency Champions

Pure pipes represent the default type in Angular. They offer several key characteristics:

• Recalculation on Change Detection: Pure pipes are only re-evaluated when their input data changes. This is determined through reference checks (objects and arrays) or value checks (primitive data types).
• Stateless Behavior: Pure pipes are stateless, meaning they don’t maintain or alter any internal state. This contributes to performance optimization.
• Ideal for Static or Infrequent Changes: Pure pipes excel when working with static data structures (immutable data) or data that doesn’t change frequently.

Here’s a basic example of a custom pure pipe that converts text to uppercase:

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

@Pipe({
  name: 'pureUppercase'
})
export class PureUppercasePipe implements PipeTransform {
  transform(value: string): string {
    console.log('Pure Pipe Called');
    return value.toUpperCase();
  }
}

In the template:

<p>{{ 'hello world' | pureUppercase }}</p>

The pureUppercase pipe transforms "hello world" to "HELLO WORLD". Since it's pure, it only re-executes if the input string changes.

Use Cases for Pure Pipes:

• Formatting data like dates, currencies, or numbers.
• Simple, stateless transformations.
• Scenarios with infrequently changing data.
• Performance optimization for minimal pipe re-evaluation.

An example of a built-in pure pipe is the TitlecasePipe, which capitalizes the first letter of each word.

Impure Pipes: Dynamic Recalculation

Impure pipes, as the name suggests, are recalculated on every change detection cycle, regardless of input data changes. This means Angular calls the pipe’s transform method whenever something happens within the application, even if the pipe's input hasn't changed.

Characteristics of Impure Pipes:

• Recalculated on Every Change Detection: Impure pipes are invoked during every change detection cycle, potentially impacting performance.
• Suited for Dynamic and Mutable Data: Impure pipes are well-suited for scenarios where the input is mutable, such as arrays that can be modified in place or objects whose properties change internally without reference alteration.
• Explicit Declaration: To mark a pipe as impure, you need to set the pure property to false in the pipe's decorator.

Example of an Impure Pipe:

Here’s a pipe that filters an array based on a search string:

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

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

    );
  }
}

In the template:

<ul>
  <li *ngFor="let item of items | impureFilter:searchText">{{ item.name }}</li>
</ul>

The impureFilter pipe filters the items array based on the searchText. Since it's impure, it re-exec

Use Cases for Impure Pipes:

• Real-time filtering or sorting of dynamic data sets.
• Situations where recalculation is necessary, even if the input reference doesn’t change.

An example of a built-in impure pipe is the JsonPipe, which serializes objects into JSON strings for display in the template.
Working with Immutable Data in Pure and Impure Pipes

Pure and impure pipes behave differently when working with immutable data types like arrays and objects.

<div>Age: {{ user.birthDate | agePipe }}</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent   
 {
  user = { name: 'Rohit', birthDate: '12-02-1998' };
}

function updateUser() {
  this.user.birthDate = '12-05-2002'; // Update the birthDate property
}

In this example, we’re updating the birthDate property of the user object directly (without changing reference).

1. Pure Pipe:

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

@Pipe({
  name: 'agePipe',
  pure: true
})
export class AgePipe implements PipeTransform {
  transform(dateString:   
 string): number {
    const today = new Date();
    const birthDate = new Date(dateString);
    const age = today.getFullYear() - birthDate.getFullYear();
    return age;
  }
}

Since the pipe is pure, directly mutating the object won’t trigger recalculation. To force a change detection update, you need to reassign the user object with a new reference:

function updateUser() {
  this.user = {
    ...this.user,
    birthDate: '12-05-2002'
  };
}

2. Impure Pipe:

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

@Pipe({
  name: 'agePipe',
  pure: false
})
export class AgePipe implements PipeTransform {
  transform(dateString: string): number {
    const today = new Date();
    const birthDate = new Date(dateString);
    const age = today.getFullYear() - birthDate.getFullYear();
    return age;
  }
}

With an impure pipe, mutating the object directly will trigger recalculation.

Performance Considerations

Pure Pipes:

• Efficient: Pure pipes are optimized for performance due to their recalculation based on input reference changes.
• Ideal for large data sets: Suitable for components with infrequent data updates.
• Enhanced template rendering: Contribute to optimized rendering in Angular.

Impure Pipes:

• Potential performance impact: Can slow down applications, especially with complex operations or frequent recalculations.
• Necessary for real-time updates: Useful for scenarios involving asynchronous data or mutable data structures.

Conclusion

By carefully choosing between pure and impure pipes, you can optimize both the performance and functionality of your Angular application. Pure pipes are generally preferred for their efficiency, while impure pipes are necessary for specific use cases involving dynamic or mutable data.

To effectively implement pure pipes in Angular, consider hiring expert Angular developers from Angular Minds.

Our team possesses the knowledge and experience to optimize your application’s performance and ensure seamless integration of pure pipes.

Read detailed blog here:- https://www.angularminds.com/blog/pure-vs-impure-pipes-in-angular