{{ ( source$ | async)?.property1 }}
{{ ( source$ | async)?.property2 }}
This will subscribe to the source$ observable more than once. A commonly used technique to avoid this is to assign the result of the async into a view variable, like so:
<ng-container ngif=”source$ | async as source”>
{{ source?.property1 }}
{{ source?.property2 }}
</ng-container>
But if you have other UI elements within that ng-container that you want to be displayed whether or not source$ has emitted a value then you might not like the fact that a portion of your UI is excluded until the observable emits a value or when the observable emits a falsey value. If that is the cast, you can try this little trick.
<ng-container ngif=”(source$ | async) || {} as source”>
{{ source.property1 }}
{{ source.property2 }}
</ng-container>
Comments