It looks like your issue is quite similar to one I've encountered before and provided a solution for.

Trigger update of component view from service - No Provider for ChangeDetectorRef

To resolve this, you'll need to prompt Angular to update your view. One way to achieve this is by utilizing the ApplicationRef. Here's an example of how your service code could be structured:

import {Injectable, ApplicationRef } from '@angular/core';
  
@Injectable()
export class UserService {
  private isLoggedIn: boolean = false;
  constructor(private ref: ApplicationRef) {}
  
  checkLogin() {
    let stillLogged = //insert logic here making API calls or other actions.
    if (this.isLoggedIn != stillLogged) {
        this.isLoggedIn = stillLogged;
        this.ref.tick(); //triggers Angular to update the view.
    }
  }
}

More information on ApplicationRef can be found in this documentation page

Check out this live example where AppRef is used to update views when a client subscribes to push notifications on Safari browser.

If needed, you could also consider moving this.applicationRef.tick() inside this.zone.run(()=>{}) (especially if NgZone is required).

This is my proposal for utilizing observables.

Within my service:

export class MyAuthenticationService {
  authenticationSubject: ReplaySubject<any>;
  authentication$: Observable<any>;

  constructor(private http: HttpClient) {
    this.authenticationSubject = new ReplaySubject<any>();
    this.authentication$ = this.authenticationSubject.asObservable();
  }

  authenticate(): void {
    // implement your authentication logic and once it succeeds
    this.authenticationSubject.next({authenticated: true});
  }
}

In my HTML:

<ul class="navbar-nav">
  <li class="nav-item" *ngIf="!(myAuthSvc.authentication$ | async)?.authenticated">
    <a href="#" class="nav-link" (click)="authenticate()">Login</a>
  </li>
  <li class="nav-item" *ngIf="(myAuthSvc.authentication$ | async)?.authenticated">
    <a href="#" class="nav-link disabled" disabled>Hello, {{ name }}</a>
  </li>
  <li class="nav-item" *ngIf="(myAuthSvc.authentication$ | async)?.authenticated">
    <a href="#" class="nav-link" (click)="logout()">Logout</a>
  </li>
</ul>

Within my component:

@Component({
  ...
})
export class MyComponent {
  constructor(public myAuthSvc: MyAuthenticationService) {}

  ...
}

It seems like the issue arises from relying too heavily on information found on the internet to track changes, resulting in potential weird behavior. Have you considered simplifying things by using just the detectChanges() method? While it might not be the most optimal solution, it should do the trick...

An alternative approach, if the subscribe() function is within the zone, would be to use markForCheck()... however, as mentioned earlier, detectChanges alone should suffice.

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  name: string;
  loggedIn: boolean;

  constructor(private oauthService: OAuthService,
    private sessionService: SessionService,
    private applicationRef: ApplicationRef,
    private zone: NgZone,
    private cd: ChangeDetectorRef) {
    //this.loggedIn = false;
  }

  ngOnInit() {
    this.sessionService.state.subscribe(isLoggedIn => {
      console.log('Detected a state change! User is logged in: ' + isLoggedIn);
      if (!isLoggedIn) {
        this.name = null;
        this.loggedIn = false;
        console.log('User not logged in. Name is set to null');
      } else {
        const claims: any = this.oauthService.getIdentityClaims();
        console.log(`Got claims. Name is now ${claims.name}`);
        this.name = claims.name;
        this.loggedIn = true;
      }
      this.cd.detectChanges();
    });
    this.sessionService.configureWithNewConfigApi();
  }

  public login() {}

  public logoff() {}
}

I hope this provides some guidance.

After reviewing the code you shared, everything seems to be in order. However, it's possible that there could be a conflict with the ngIf directive causing your issue. One suggestion is to ensure that you initialize the loggedIn value at the beginning and consider using an *ngIF else template within your HTML file.

loggedIn: boolean = false;

The corresponding HTML code snippet would look like this:

<ul class="navbar-nav">
    <li class="nav-item" *ngIf="!loggedIn; else loggedInTemplate">
        <a href="#" class="nav-link" (click)="login()">Login</a>
    </li>
    <ng-template #loggedInTemplate>
        <li class="nav-item">
          <a href="#" class="nav-link disabled" disabled>Hello, {{ name }}</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" (click)="logoff()">Logout</a>
        </li>
    </ng-template>
  </ul>

Without additional context, it's challenging to pinpoint any other potential issues. Unfortunately, without access to the sessionService code, I am unable to recreate the error scenario. Hopefully, my recommendations assist you in resolving the problem.

In order to ensure that the view reflects the correct logged in status, you can run the code within the ngZone. Here's how you can do it:

this.ngZone.run(() => {
  this.loggedIn = true;
});

Below is the updated code snippet:

import {
Component,
OnInit,
SimpleChanges,
ApplicationRef,
ChangeDetectorRef,
NgZone } from '@angular/core';
import {  OAuthService} from 'angular-oauth2-oidc';
import { SessionService } from '../session.service';

@Component({
 selector: 'app-navigation',
 templateUrl: './navigation.component.html',
 styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  name: string;
  loggedIn: boolean;

  constructor(private oauthService: OAuthService,
    private sessionService: SessionService,
    private zone: NgZone) {
  }

  ngOnInit() {
    this.sessionService.state.subscribe(isLoggedIn => {
      console.log('Detected a state change! User is logged in: ' + isLoggedIn);

        if (!isLoggedIn) {
          this.name = null;
          this.loggedIn = false;
          console.log('User not logged in. Name is set to null');
        } else {
          const claims: any = this.oauthService.getIdentityClaims();
          console.log(`Got claims. Name is now ${claims.name}`);
          this.name = claims.name;
          this.zone.run(() => {
          this.loggedIn = true;
          });
        }
    });
    this.sessionService.configureWithNewConfigApi();
  }

  public login() {}

  public logoff() {}
}

I trust that implementing this approach will rectify the issue related to view updates.