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?
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With