How to handle boolean observables with the async pipe in Angular

Question

I have the following code:

public obs$: Observable<boolean>

<div *ngIf="(obs$ | async) === true || (obs$ | async) === false">
  {{ (obs$ | async) ? 'yes' : 'no' }}
</div>

It works as intended, but the if looks a little verbose.

The problem is that I cannot simply do <div *ngIf="(obs$ | async)">. If I try that, it will work in the case when the observable did not emit a value yet or if the value is true, but it will not work if the value is false, because the if will evaluate to false and the div is not displayed.

I assume the same issue applies if a falsy value is returned, such as an empty string or 0.

Is there a better, easier way of doing that?

Can you please shed some light on when the `Observable` will not emit a value? — SiddAjmera, Mar 22 '19 at 09:51
@SachinGupta Oh wow, it is actually that simple. I tried to compare it to undefined which didn't work and I just gave up. Thanks a lot! If you post an answer I will accept it. — Andreas Gassmann, Mar 22 '19 at 09:54
@SiddAjmera I'm making an API call to get the value, so it sometimes takes a few seconds to emit a value. — Andreas Gassmann, Mar 22 '19 at 09:55
You can also `pipe` the response and return a `false` in the `catchError` operator. That way you'd always be certain that a boolean value is emitted. And you won't have to use an `*ngIf` on the `div` — SiddAjmera, Mar 22 '19 at 09:56

WillyC · Answer 1 · 2020-06-12T15:01:48.860

52

Here's a way where you can share the subscription and not have to make any custom pipe:

<ng-container *ngIf="{value: obs$ | async} as context">
    {{context.value}}
</ng-container>

The *ngIf will evaluate to true no matter what (I believe) and then you can do your own tests on the value in the context object.

...would be better if they would just implement *ngLet I think!

The thing I like about this solution is that the resulting value is reusable with only the single use of an async pipe and its still pretty concise (even if it isn't perfect).

edited Jun 12 '20 at 15:01

answered Apr 30 '19 at 22:52

WillyC

3,917
6
35
50

5

To add some clarity the `context` object is always defined so the `ng-container` will always show. To check if the `Observable` has completed use `context.value !== null` ... thanks, good answer – Kieran Nov 13 '19 at 03:26
apart from the typo 'asyc' should be 'async' this solved my issue - thanks – Alan Gee Jun 12 '20 at 15:00
Thanks for noticing that - should be fixed. – WillyC Jun 12 '20 at 15:02
1

Is this still the way to go? Its working well, but feels hacky... – enno.void Feb 10 '22 at 08:55
1

@enno.void you could try this: https://www.npmjs.com/package/ng-let – WillyC Feb 11 '22 at 02:47
2

@WillyC thanks, i know the ng-let package, but im confused why something like this isnt backed into angular itself. – enno.void Feb 11 '22 at 06:15
2

@enno.void you’re not kidding. Seems like a trivial thing to add and clearly in need. – WillyC Feb 11 '22 at 19:09

score 17 · Accepted Answer · answered Mar 22 '19 at 09:55

17

You can do (obs$ | async) !== null

answered Mar 22 '19 at 09:55

Sachin Gupta

4,981
3
16
32

5

You can't get value of boolean content in Observable with this solution, right? – Paul H Feb 17 '20 at 10:51
Its a conditional check to be put in HTML, you wont get the value. – Sachin Gupta Feb 18 '20 at 10:43

score 1 · Answer 3 · answered Oct 20 '22 at 14:06

1

You can use "!!" to evalulate to boolean. for example *ngIf = "!!(item$ | async)"

answered Oct 20 '22 at 14:06

Hitesh Bariya

41
3

simple and it works – Shadoweb Feb 03 '23 at 19:13

score 0 · Answer 4 · answered Mar 22 '19 at 10:23

I think the most elegant way should be creating a custom BoolPipe ， and chain it after the async pipe。

@Pipe({name: 'myBool'})
export class MyBoolPipe implements PipeTransform {
  transform(value: boolean, exponent: string): string {
    return !value ? 'yes' : 'no';
  }
}

and init the obj$ in the constructor of your component or service (don't need null check in your HTML template), then chain it with async pipe like this:

<div>{{ obs$ | async | myBool }}</div>

nothing elegant about that, you are just bloating up the code — IonicMan, May 03 '23 at 15:10

How to handle boolean observables with the async pipe in Angular

4 Answers4