What is an impure pipe in Angular?

angular angular-pipe angular2-pipe
Mr_Perfect picture Mr_Perfect · Sep 2, 2016 · Viewed 50.5k times · Source 
@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

Günter Zöchbauer picture Günter Zöchbauer · Sep 2, 2016

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.

Related questions

Angular 2 Pipe under condition

Is it possible in Angular 2 to apply a pipe under condition? I would like to do something like: {{ variable.text | (variable.value ? SomePipe : OtherPipe) }} If not, what is the preferred way to achieve this effect?

Read More
Format date as dd/MM/yyyy using pipes

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible? //our root app component import {Component} from 'angular2/…

Read More
OrderBy pipe issue

I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component code: @Component({ selector: 'my-app', templateUrl: "./…

Read More