Wait for an observable to resolve in Angular

Question

<ng-container *ngIf="user | async; else login"> 
    // redirect to home page
</ng-container>

<ng-template #login>
   // display login form
</ng-template>

How to wait for 'user' observable to resolve, before 'login' form is displayed?

Answer 1

You can add something like this to your template:

<ng-container *ngIf="$loaded | async; else loading"> 
  <ng-container *ngIf="$user | async; else login"> 
      // redirect to home page
  </ng-container>

  <ng-template #login>
    // display login form
  </ng-template>
</ng-container>

<ng-template #loading>
   // loading
</ng-template>

And in the component's code:

  $loaded = this.$user.pipe(
    mapTo(true),
    startWith(false)
  );