How to display promise/observable with value 0 in Angular template?

user_8468233 0
Viewed 262

I have a promise role$: Promise<Role> where Role is an enum with several values (ROLE1, ROLE2 etc.).

I want to display the value of role$ in my template:

<ng-container *ngIf="authService.role$ | async as role">
  {{role}} <!-- only displayed if role is > 0 -->
</ng-container>

My problem is that even though the promise holds a value, as soon as it is 0 (the first enum ROLE1), the *ngIf condition will still be false and the contents will not be displayed. I know that I could set custom values to the enums starting at 1 but there must be a better solution than that? Is there a way to bind role$ to role without using *ngIf?

angular typescript
1 Answers

It is possible to extract value from async pipe and then use it:

<ng-container *ngIf="{bar: authService.role$ | async} as foo">
    {{ foo.bar }}
</ng-container>

So after resolving promise you can do what you want.

user_16462400
Related