What is an impure pipe in Angular?

Question

@Pipe({name:'myPipe', pure: false})

I am unable to understand impure pipes.

What's the difference between pure and impure pipes?

Please explain with a simple and basic example.

Answer 1

A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.

An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes.

This is relevant for changes that are not detected by Angular

• when you pass an array or object that got the content changed (but is still the same instance)
• when the pipe injects a service to get access to other values, Angular doesn't recognize if they have changed.

In these cases you probably still want the pipe to be executed.

You should be aware that impure pipes are prone to be inefficient. For example when an array is passed into the pipe to filter, sort, ... then this work might be done every time change detection runs (which is quite often especially with the default ChangeDetectionStrategy setting) event though the array might not even have changed. Your pipe should try to recognize this and for example return cached results.

Answer 2

Beside previous answer, I want to add another difference: the number of instances.

Suppose a pipe is used several times in a HTML code. Like:

<p> {{'Hello' | translate }}<p>
<p> {{'World' | translate }}<p>

• If pipe is pure: there will be only one instance of the pipe. The transform method will be called twice but on the same instance.
• If pipe is impure: there will be two instances of the pipe.

(you can see this by generating a random id in the constructor of the pipe and print it in both: constructor and transform method)

As pure pipes (or generally pure functions) does(should) not have ANY side effects, the same pure code can be reused any number of times without worries. Seems this is why pure pipes are only once instantiated.

OBS: this is valid in my angular 4.0 environment.

Answer 3

Demo: difference b/w pure and impure pipe

In angular, a pipe can be used as pure and impure

What is pure or impure pipe?

In simple words,
impure-pipe works for every change in the component
pure-pipe works only when the component is loaded.

How to make pipe or impure pure?

@Pipe({
  name: 'sort',
  pure: false //true makes it pure and false makes it impure
})
export class myPipe implements PipeTransform {

  transform(value: any, args?: any): any {
     //your logic here and return the result
  }

}

How to use it?

<div> {{ arrayOfElements | sort }}<div>

Be careful while using impure pipe because this may over-use your system resources in case of inappropriate use.

Read in depth: Pure vs Impure Pipe

Answer 4

Pure & impure Pipes

• pure pipes are the pipes which are executed only when a "PURE CHANGE" to the input value is detected.

• A pure change is either a change to a primitive input (string, number etc) value. or changed Object reference.

• by default a pipe is pure pipe.

• So impure pipe executes everytime irrespective of source has changed or not. which leads to bad performance. thats why it is not recommneded to use pipes for filtering data.

To make a pipe impure:

@Pipe({
  name: 'empFilter',
  pure: false  // default is set to true.
})
export class EmpFilterPipe implements PipeTransform {

  transform(employees: Employee[], searchValue?: string): Employee[] {
  
   }
}

<input type="text" [(ngModel)]="searchValue">
<button (click)="changeData()"></button>

changeData(): void{
    this.employees[0].name = "SOMETHING ELSE";
}

<div *ngFor="let emp of employees | empFilter : searchValue">
    {{emp.name}}
</div> 

NOTE : if pipe is pure and  employees data is changed using method "changeData()" - It will not detect the changes .
     Since input value to the  EmpFilterPipe is Object & reference of "employees"  has not been changed.