Store resolved value of Observable for multiple use in Template

user_2298896 0
Viewed 106

What I want to achieve in an Angular template is something like the following:

<div *ngIf="let resolved = (observable$ | async)">
  <span>{{resolved.property1}}</span>
  <span>{{resolved.property2}}</span>
  <span>{{resolved.property3}}</span>
</div>

I have an observable in the controller, the async result of which I want to use multiple times in the template. The whole <div> should only be rendered once the observable receives a value at all.

I am aware that the above code does not work like that because the *ngIf micro-syntax does not allow for this kind of let statement. The only way to really achieve this I've found is by creating a custom component and hand in (observable$ | async) as an input, so that the resolved value is available in the component's controller.

But I think this is such a standard problem that there must be a more simple solution. What is the best way to go about this?

rxjs angular
1 Answers

You are quite close it's done with as

<div *ngIf="observable$ | async as resolved">
  <span>{{resolved.property1}}</span>
  <span>{{resolved.property2}}</span>
  <span>{{resolved.property3}}</span>
</div>
user_131120180
Related