ngIf improvements for Rx
See original GitHub issueGoals
When writing Rx style code it is often necessary to write code like this
{{ (userObs|async).?lastName}}, {{ (userObs|async).?firstName}}
The issue is that:
- every
async
creates a listener and - the need to use the
.?
makes coding cumbersome.
What is needed is to be able to subscribe to the observable once and then refer to it in subsequent location. Additionally we need a way to display an alternative template while the observable has not yet yielded a value.
Proposal
- Allow
ngIf
to assign data to local value. - Add an
else
feature tongIf
so that an alternative template can be shown until the observable yields a value.
<div *ngIf="userObs | async; else loading; let user">
{{ user.lastName}}, {{ user.firstName }}
</div>
<template #loading>
loading...
</template>
NOTE: the microsyntax is consistent with existing implementation of the microsyntax. For expanded form see:
<template [ngIf]="userObs | async" [ngIfElse]="loading" let-user>
{{ user.lastName}}, {{ user.firstName }}
</template>
<template #loading>
loading...
</template>
Issue Analytics
- State:
- Created 7 years ago
- Reactions:24
- Comments:12 (9 by maintainers)
Top Results From Across the Web
Angular2 - *ngIf and async observables - Stack Overflow
Basically when showDiv is set to true at the first place, the someObservable loads, but when I set it to false and then...
Read more >The benefits of adding rx-query to your Angular project
In this post, we're going to add rx-query to the Angular Tour of Heroes while pointing ... <ng-container *ngIf="heroes$ | async as query">....
Read more >keywords:ngIf - npm search
*ngCond is an improved version of *ngIf directive, it has the following advantages: * forget about async pipe, the directive subscribes/unsubscribes to the ......
Read more >AMD Releases 22.10.2 (Optional) with a lot of fixes - Reddit
Improvements have been made in 22.10.2 to reduce occurrence for some ... AMD Radeon™ RX 6800M Series GraphicsAMD Radeon™ RX 6700M Series ...
Read more >Why gamers should consider waiting for AMD RDNA 3 and ...
Firstly, it will bring a number of significant improvements over the ... The Radeon RX 7000 series will be built around AMD's new...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This would be useful in many other places, I wouldn’t limit it to ngIf.
@mhevery a little bit off topic but as we have discussed about it, django has a for else