What if I need to read multiple properties from the object in that subscription?
Another way to put it is that you don’t want to end up doing something like this:
<p>First name: {{ (user$ | async)?.firstName }}</p>
<p>Last name: {{ (user$ | async)?.lastName }}</p>Code language: HTML, XML (xml)The above code is pretty hard to read and requires one subscription for each property. This alone can be a disaster, as each subscription might trigger an HTTP request for the same data from the server!
Instead, you can do something like this, which uses only one subscription, stores the result in a local variable, then renders the data when it’s available. This technique works with any structural directive, such as *ngIf or *ngFor:
<div *ngIf="user$ | async as user">
<p>First name: {{ user.firstName }}</p>
<p>Last name: {{ user.lastName }}</p>
</div>