Let’s imagine we’ve an observable which fetches a list of users:
All right. Suppose we got a mission to display each user field by a separated list. But there is a constraint, each list will be displayed differently. Thus, the appropriate template could be:
Let’s check how many subscriptions would be created in that way by adding a log when a subscription is created:
Here are the results of the Console:
Well, we notice that each usage of async pipe creates another subscription. Although these are three different
*ngFor, we’re talking about the same observable - so we’d expect that async pipe would use a single instance of a shared subscription.
In case there is an operator on the observable, for example, a
map operator which does a heavy business logic like calculating - that operator will be executed for each subscription individually.
Let’s see how to create a single subscription for
users$ but still be able to use its result for each list.
As part of Angular 4.0.0 - we introduced with the
as keyword. That keyword enables assigning a local variable in the component’s template. In other words, it means we’re able to use a variable (as much as we want) which points to the evaluated result of the async pipe.
Note: In general, assigning the result using the
as keyword isn’t necessarily for the async pipe but for all pipes.
To bind a local variable with the template, we need to wrap the template with the
In case that you’re not familiar with the
ng-container - it’s just a wrapper that enables to group multiple DOM elements (without adding an additional element to the DOM) and apply a structural directive on these elements (such as
It’s time to use the
Basically, what we do is to assign the result from the subscription as a local variable which is named
users. Notice we need a structural directive in order to interpret the
as keyword and for binding the
users variable with the result from the async pipe. That’s the reason we use
If we’d like to use the users array for other purposes (for instance, printing its length) we could use the
users variable as well - as long as it’s evaluated inside that
Here’s attached the final result:
Indeed, we’re done.