8000 Add a directive to enable binding async pipe without using *ngIf · Issue #44667 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

Add a directive to enable binding async pipe without using *ngIf #44667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
matrium0 opened this issue Jan 9, 2022 · 2 comments
Closed

Add a directive to enable binding async pipe without using *ngIf #44667

matrium0 opened this issue Jan 9, 2022 · 2 comments

Comments

@matrium0
Copy link
matrium0 commented Jan 9, 2022

Which @angular/* package(s) are relevant/releated to the feature request?

core

Description

Subscribing to an Observable and using the result in view context requires the use of *ngIf and the async pipe. If you want to display content BEFORE the Observable emits a value you are left with using something like else anotherTemplate. This solves some cases, but is very limiting. Sometimes you actually want to display the content within. For example you could create a component LoadingIndicaterOverlayWrapper that greys out the actual content until a value arrives. This is not possible with *ngIf and the async pipe, since the ngIf is falsey until it emits.

<div *ngIf="filteredBooks$ | async as books">
    <app-loading-indicator-overlay-wrapper [showOverlay]="**???????**">
      ... content
    </app-loading-indicator-overlay-wrapper>
</div>

Proposed solution

See how NGRX resolves this issue with their ngrxLet directive: https://ngrx.io/guide/component/let

Vanilla Angular could profit from something similar imo.

Alternatives considered

At the moment you can use the dirty trick of using an object within *ngIf, so that it always resolves to truthy, but that is a bit messy and seems like a work around.
Source
https://medium.com/@yurykatkov/how-to-avoid-multiple-async-pipes-in-angular-ff0d51a8d368
@pkozlowski-opensource
Copy link
Member

This feature request is already tracked in #15280 and #18919 - feel free to add your input in those issues.

Closing as a duplicate of #15280

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pkozlowski-opensource @matrium0
0