[Angular] Menu nie odświeża się po zalogowaniu użytkownika innej roli

Witam
Pisałem wcześniej o tym jak ogarnąć role w aplikacji.
Angular 7 - widok komponentu zależny od roli zalogowanego użytkownika

Problem mam tego typu, że główne menu jest ukrywane na stronie logowania i nie aktualizuje się jeśli użytkownik innej roli się zaloguje. Na teraz mam tylko dwie role - przedstawiciel, kierownik. Mam w serwisie sprawdzanie jaki typ użytkownika się loguje i ustawiam odpowiednie observable - loggedIn - aby sprawdzić czy wyświetlać menu oraz isAgent - aby sprawdzić rolę.

Jeśli jestem zalogowany przedstawicielem, wyloguje go, zaloguje się kierownikiem to menu się zmienia na poprawne.
Jeśli jestem zalogowany kierownikiem, wyloguje go, zaloguje się przedstawicielem to menu zostaje kierownika i zamieni się dopiero po odświeżeniu strony.

W komponencie bottom-navmenu zrobiłem dwa menu z *ngIf

<div *ngIf="(isLoggedIn$ | async) && (isAgent$ | async)">
    <p>Przedstawiciel</p>
</div>

<div *ngIf="(isLoggedIn$ | async) && !(isAgent$ | async)">
    <p>Kierownik</p>
</div>

Gdzie robię błąd. Dlaczego działa przedstawiciel -> kierownik, a nie działa kierownik -> przedstawiciel skoro to jest to samo.

Zaczęło działać poprawnie dopiero jak zrobiłem subskrypcję w ngOnInit()

    this.isAgent$.subscribe((result: boolean) => {
      this.isAgent = result;
    });

  <ng-container *ngIf="isLoggedIn$ | async as isLoggedIn">
    <div *ngIf="isLoggedIn">
      <div *ngIf="isAgent">
          Przedstawiciel
      </div>
      <div *ngIf="!isAgent">
            Kierownik
    </div>
   </div>
  </ng-container>

Sposób na dodanie jeszcze jednego ng-container z asynchronicznym *ngIf nie działa. Pokazuje się puste, białe menu, bez elementów dla obu ról.
Czy to znaczy, że asynchroniczny *ngIf może być tylko raz w elemencie i nie może być zagnieżdżany?