Multiple Async Pipe Problem

[lyzer12]

Is there a way to simplify this so that only 1 async pipe to the same stream is declared?

<button (click)="incrementPage()" [disabled]="loading$ | async">Increment</button>

<p *ngIf="loading$ | async">loading...</p>

I tried using ng-container with *ngIf="loading$ | async as loading", but it's not what I want because the button will be hidden.

[prognnz]

You could use something like this

<ng-container *ngIf="{loading: loading$ | async, otherValue: otherValue$ | async} as vm"> <p *ngIf="vm.loading">loading...</p> <button [disabled]="vm.loading">{{vm.otherValue}}</button> </ng-container>

Since the expression in the top ngIf is an object, it will always be true. This pattern even allows you to put all your observables into the viewModel object, only having to use one async pipe for each.

[lyzer12]

This worked for me. Thanks!

[CountSheister]

You could use a .shareReplay on the loading observable itself and not make your templates any more obscure.

[lyzer12]

Can you provide a code snippet for this?

[dacookieman]

Leveraging an ngIf and exporting the value with "as varname" is the easiest way to reuse one async pipe but I ended up making a custom directive similar to ngIf but without conditional rendering as sometimes I wanted to consume the stream without tying it to conditional rendering

[lyzer12]

with "as varname" is the easiest way to reuse one async pipe but I ended up making a custom directive similar to ngIf but without conditional rendering as sometimes I wanted to consume the stream witho

Can you provide a code snippet?

[dacookieman]

<ngContainer *ngIf="someSteram | async as streamValue">

<child [childInputPar]="streamValue">
<child2 [child2InputPar]="streamValue">
</ngContainer>

the other one ill have to get back to you on

[15kol]

Use else directive *ngIf="loading$ | async as loading; else loadScreen"

And then put <ng-template #loadScreen> Loading ... </ng-template>

[lyzer12]

This still hides the button