In Angular, pipes are used to transform data in templates. They can be categorized as
pure pipes and
impure pipes based on their behavior and performance characteristics.
1. Pure Pipes:
Pure pipes are the default type of pipes in Angular. They are designed to be pure functions that take an input value and return a transformed output value.
Pure pipes are stateless and deterministic, meaning their output is solely dependent on their input, and they don't have any side effects. Angular optimizes pure pipes by executing them only when their input values change.
Here's an example of a pure pipe in Angular:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'testPipe',
pure: true
})
export class TestPipe implements PipeTransform {
transform(value: string): string {
Object.keys(value).forEach(function(key,index) {
// key: the name of the object key
// index: the ordinal position of the key within the object
value[key] = value[key].toUpperCase()
});
return value;
}
}
In the above example, the
`TestPipe` is a pure pipe that transforms a string to uppercase. The
`pure: true` setting in the `@Pipe` decorator indicates that this pipe is pure. It will only execute the `transform` function when the `value` input changes.
Suppose we have HTML code as following:-
{{ user | testPipe}} in HTML
and component code as following:-
user = { name:'test', city: 'test city'};
and the new changes are :-
this.user.city = "new test city"
For the above example, testPipe will not execute as
object reference is not changed, To allow the pipe to execute , we have to make the pure attribute of testPipe as false or we need to make following changes in the component code:-
this.user = {
name: 'new test',
city: 'new test city'
}
In above code, testPipe will execute as object reference is changed.
2. Impure Pipes:
Impure pipes, on the other hand, are pipes that may have side effects and can be executed more frequently. They are explicitly marked as impure by setting the
`pure` property to
`false` in the `@Pipe` decorator. Impure pipes are not optimized by Angular for change detection and can be executed multiple times, even when the input values haven't changed.
Here's an example of an impure pipe in Angular:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'testPipe',
pure: false
})
export class TestPipe implements PipeTransform {
transform(value: string): string {
Object.keys(value).forEach(function(key,index) {
// key: the name of the object key
// index: the ordinal position of the key within the object
value[key] = value[key].toUpperCase()
});
return value;
}
}
Suppose we have HTML code as following:-
{{ user | testPipe }} in HTML
and component code as following:-
user = { name:'test', city: 'test city'};
and the new changes are :-
this.user.city = "new test city"
For the above example, testPipe will execute, as
Impure pipes executes every time angular detects any changes regardless of the change in the input value.
Conclusion:
It's important to note that while
pure pipes are the default and recommended type in Angular due to their performance optimizations,
impure pipes can still be useful in certain scenarios when dealing with stateful or non-deterministic transformations. However, using impure pipes excessively or inappropriately can impact the performance of your Angular application.