How to avoid async chain in template?

Question

I have the following template:

<app-order-about [application]="(applicationObs | async)?.application"></app-order-about>
<app-order-documents [documents]="(applicationObs | async)?.application?.documents"></app-order-documents>

I dislike this notation: ?.application?.documents because it is long and it looks awful.

Also async calls observer request twice, could I use promise instead?

You can create a custom directive to store values. This [SO Thread](https://stackoverflow.com/questions/38582293/how-to-declare-a-variable-in-a-template-in-angular) might be helpful. — Harun Yilmaz, Jul 22 '20 at 17:35

score 1 · Accepted Answer · answered Jul 22 '20 at 18:22

You can use the as in your async like so:

<ng-container *ngIf="applicationObs | async as app">
    <app-order-about [application]="app.application"></app-order-about>
    <app-order-documents [documents]="app?.documents"></app-order-documents>
</ng-container>

From angular doc: https://angular.io/api/common/NgIf#storing-a-conditional-result-in-a-variable

How to avoid async chain in template?

1 Answers1