*ngIf not working as expected with observable

I like the answer with *ngIf and Else approach, but your version can also be optimized to prevent double subscription.

<ng-container *ngIf="{ isLoggedIn: (isLoggedIn$ | async) } as observables">
  <a class="router-link nav-item" routerLink="/login" *ngIf="!observables.isLoggedIn">
    Login
  </a>
  <a class="router-link nav-item" (click)="onLogout()" *ngIf="observables.isLoggedIn">
  Logout
  </a>
</ng-container>

Put the async pipe in parenthesis.

<a class="router-link nav-item" routerLink="/login" *ngIf="!(isLoggedIn$ | async)">
  Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
  Logout
</a>

You can also refactor to use the else part of ngIf directive:

<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async; else loginBlock">
    Logout
</a>
<ng-template #loginBlock>
    <a class="router-link nav-item" routerLink="/login">
        Login
    </a>
</ng-template>

You can see more examples in the docs.