question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ngIf improvements for Rx

See original GitHub issue

Goals

When writing Rx style code it is often necessary to write code like this

{{ (userObs|async).?lastName}}, {{ (userObs|async).?firstName}}

The issue is that:

  1. every async creates a listener and
  2. 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 to ngIf 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:closed
  • Created 7 years ago
  • Reactions:24
  • Comments:12 (9 by maintainers)

github_iconTop GitHub Comments

8reactions
fxckcommented, Nov 23, 2016

This would be useful in many other places, I wouldn’t limit it to ngIf.

3reactions
vicbcommented, Dec 8, 2016

@mhevery a little bit off topic but as we have discussed about it, django has a for else

{% for user in users %}
    <li>{{ user.username|e }}</li>
{% else %}
    <li><em>no users found</em></li>
{% endfor %}
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found