Answers

What are pure and impure Pipes in Angular?

Vishal Joshi

3 Answers

In Angular, pipes are a way to transform data before displaying it in the view. Pipes take data as input and return transformed data as output. There are two types of pipes in Angular: pure pipes and impure pipes.

Pure Pipes: Pure pipes are pipes that are stateless and do not modify the input data. They only transform the input data and return the transformed data as output. Pure pipes are called only when the input data changes, which makes them very efficient. Angular provides some built-in pure pipes, such as DatePipe and UpperCasePipe.

Impure Pipes: Impure pipes are pipes that are stateful or have side effects. They can modify the input data and have a performance cost. Impure pipes are called every time the Angular change detection system runs, which can be very frequent. Impure pipes are identified by adding the impure flag to the pipe definition. Angular does not provide any built-in impure pipes, and it is generally recommended to avoid using them if possible.

Tuhin Paul3y

Pure pipe A pure pipe is only called when Angular detects a change in the value of the parameters passed to a pipe @Pipe({ name: 'filterPipe', pure: true }) export class FilterPipe {} Impure pipe An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes. @Pipe({ name: 'filterPipe', pure: false }) export class FilterPipe Example: Consider a pipe that filters given array Checkout source by clicking on [Github] in this example, I am trying to use a custom pipe to filter my *ngFor loop using an input field with ngModel import { PipeTransform, Pipe } from '@angular/core'; import { User } from './User'; // Pipe @Pipe({ name: 'filter', pure: true }) export class FilterPipe implements PipeTransform { transform(users: User[], searchTerm: string): User[] { if (!users || !searchTerm) { return users; } return users.filter(user => user.name.toLowerCase() .indexOf(searchTerm.toLowerCase()) !== -1); } } and the HTML file:

{{user.name}}

Demonstration After you enter a search term for example “ahmed” When you click on change by Property button => It ‘s problem , the name changes from “ahmed” to “ghoul” but the filter doesn’t works When you click on change by Reference button => The name changes from “ahmed” to “ghoul” and the filter works fine Change by property When you pass an array or object that got the content changed (but is still the same instance) changeByProperty() { this.users[0].name = "ghoul"; } Problem: In the case FilterPipe didn’t determine if the output will change Solution1: Change by reference Solution2: Impure pipe Change by reference Change Reference is a solution that allow FilterPipe to determine if the output will change, for example: changeByReference() { const refUsers= Object.assign([], this.users); // or const refUsers= [...this.users]; // or const refUsers = this.users.slice() refUsers[0].name = "ghoul"; this.users = refUsers }

Vijay K3y

Pure Pipes:
A pure change is when the change detection cycle detects a change to either a primitive input value (such as String, Number, Boolean, or Symbol) or object reference (such as Date, Array, Function, or Object).

Example:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = { name:'Rohit', age: 23};
}

In the above example if user name or age change then pure pipe can not detact the change and execute.

Impure Pipes:
An impure change is when the change detection cycle detects a change to composite objects, such as adding an element to the existing array.

Like in same example of code above mention impure pipe can detect change in object or array value. if we change user name or age in array then it will detect and pipe will execute.

We can define custom pipe as pure or impure as below code.

@Pipe({
  name: 'purePipe',
  pure: true //here we can define it as pure or impure.
})
export class PurePipe {}

Vishal Joshi4y