There are two categories of pipes, stateless and stateful.
Stateless pipes are pure functions that flow input data
through without remembering anything or causing detectable side-effects.
Most pipes are stateless. The `DatePipe` in our first example is a stateless pipe. So is our custom `ExponentialStrengthPipe`.
Stateful pipes are conceptually similar to classes in object-oriented programming. They can manage the data they transform. An example would be a Pipe that creates an HTTP request, stores the response and displays the output. Pipes that actually retrieve or request data should be used cautiously, since working with network data tends to introduce error conditions which are better handled in JavaScript instead of template. This risk could be mitigated by creating custom pipe for a particular backend, which can bake in common error-handling strategies.
## The stateful `AsyncPipe`
The Angular Async pipe is a remarkable example of a stateful pipe.
The Async pipe 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.
Here is an example of binding a simple promise to a view, using the async pipe.
code-example(format="linenums").
@Component({
selector: 'my-hero',
template: Message: '{{delayedMessage | async}}',
})
class MyComponent {
delayedMessage:Promise<string> = new Promise((resolve, reject) => {
setTimeout(() => resolve('You are my Hero!'), 500);
});
}
// Initial view: "Message: "
// After 500ms: Message: You are my Hero!"
:markdown
The Async pipe saves boilerplate in the component code.
The component doesn't have to subscribe to the async data source,
it doesn't have to extract the resolved values and expose them for binding,
and (in the case of Obsevable stream sources like `EventEmitter`)
the component doesn't have to unsubscribe when it is destroyed
(a potent source of memory leaks).
### Implementing a Stateful Pipe
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.
Here's how we'll decorate our new stateful "FetchJsonPipe" that
makes an HTTP `fetch` request and (eventually) displays the data in the server's response:
```
@Pipe({
name: 'fetch',
pure: false
})
```
Immediately below we have the finished pipe. It's input value is an url to an endpoint that returns a JSON file.
The pipe makes a one-time async request to the server and eventually receives the JSON response.
```
@Pipe({
name: 'fetch',
pure: false
})
class FetchJsonPipe {
private fetchedValue:any;
private fetchPromise:Promise<any>;
transform(value:string, args:string[]):any {
if (!this.fetchPromise) {
this.fetchPromise = fetch(value)
.then(result => result.json())
.then(json => {
this.fetchedValue = json;
});
}
return this.fetchedValue;
}
}
```
Next we use this pipe in a template binding where we chain the
fetched results to the built-in `JsonPipe` that renders
