Rangle.io : Angular Training
Search…
Stateful Pipes
There are two categories of pipes:
- Stateless pipes are pure functions that flow input data through without remembering anything or causing detectable side-effects. Most pipes are stateless. The
CurrencyPipewe used and the length pipe we created are examples of a stateless pipe. - Stateful pipes are those which can manage the state of the data they transform. A pipe that creates an HTTP request, stores the response and displays the output, is a stateful pipe. Stateful Pipes should be used cautiously.
Angular provides
AsyncPipe, which is stateful.AsyncPipe
AsyncPipe can receive a
Promise or Observable as input and subscribe to the input automatically, eventually returning the emitted value(s). It is stateful because the pipe maintains a subscription to the input and its returned values depend on that subscription.Implementing Stateful Pipes
Pipes are stateless by default. We must declare a pipe to be stateful by setting the pure property of the
@Pipe decorator to false. This setting tells Angular’s change detection system to check the output of this pipe each cycle, whether its input has changed or not.1
// naive implementation assumes small number increments
2
@Pipe({
3
name: 'animateNumber',
4
pure: false
5
})
6
export class AnimateNumberPipe implements PipeTransform {
7
private currentNumber: number = null; // intermediary number
8
private targetNumber: number = null;
9
10
transform(targetNumber: number): string {
11
if (targetNumber !== this.targetNumber) {
12
this.currentNumber = this.targetNumber || targetNumber;
13
this.targetNumber = targetNumber;
14
15
const difference = this.targetNumber - this.currentNumber
16
17
Observable.interval(100)
18
.pipe(take(difference))
19
.subscribe(() => {
20
this.currentNumber++;
21
})
22
}
23
24
return this.currentNumber;
25
}
26
}
Copied!
Last modified 11mo ago
Copy link