What is an impure pipe in Angular?
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.
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.
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