My ng-template tag does not wait for ngIf async to finish

Question

I am trying to separate the owners and guest in my recipe app, where the owner can edit its own recipes while others can only view it. With my current code, it takes a bit for the ownership check to finish and I get the ng-template running in the meanwhile.

I can't figure out how to make it wait.

The HTML code:

<!-- If this recipe exists -->
<div *ngIf="recipe$ | async as recipe;">


  <!-- If we have a user  -->
  <div *ngIf="authService.user$ | async as user; else guest">
    <!-- If the user is the owner of this recipe -->
    <div *ngIf="user.uid == recipe.recipeOwnerID; else guest"> 
         <app-recipe-form [recipe]="recipe" (recipeReceived)="onReceivingRecipe($event)"></app-recipe-form> 
      </div>
  </div>
  
  <!-- User NOT logged in -->
  <ng-template #guest>
     <p> You will view it as you are a guest</p>
  </ng-template>
</div>

And a gif with the issue.

You can see how it shows the ng-template tag until the ngIf checks finish.

Answer 1

ng-template should be our of the ngIf statement.

<!-- If this recipe exists -->
<div *ngIf="recipe$ | async as recipe;">
  <!-- If we have a user  -->
  <div *ngIf="authService.user$ | async as user; else guest">
    <!-- If the user is the owner of this recipe -->
    <div *ngIf="user.uid == recipe.recipeOwnerID; else guest"> 
         <app-recipe-form [recipe]="recipe" (recipeReceived)="onReceivingRecipe($event)"></app-recipe-form> 
      </div>
  </div>    
</div>
<!-- User NOT logged in -->
<ng-template #guest>
  <p> You will view it as you are a guest</p>
</ng-template>