Handling BehaviorSubject changes doesn't work

Question

I've encountered a problem with creating service for authentication and users. I've got this component as a header navigation of my app:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '@services';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit, OnDestroy {
  sidebarEnabled: boolean = false;
  logged: boolean = false;

  logSubscribtion: any;

  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.logSubscribtion = this.authService.getUser().subscribe((logged) => {
      if (logged !== null) return (this.logged = true);
      this.logged = false;
    });
  }

  ngOnDestroy(): void {
    this.logSubscribtion.unsubscribe();
  }

  toggleSidebar(): void {
    this.sidebarEnabled = !this.sidebarEnabled;
    console.log(this.logged);
    console.log(this.authService.isLogged());
  }

  logout(): void {
    this.authService.signOut();
    this.router.navigateByUrl('/auth/login');
  }
}

And here's the code of HTML component that I want to change when logged off:

<div id="nav-container">
  <div class="wrapper">
    <nav id="main-nav">
      ...
      <ul class="nav-menu">
        <li class="nav-item" *ngIf="logged == false">
          <a
            routerLink="/auth/login"
            routerLinkActive="active"
            title="Sign in"
            class="nav-link"
          >
            Sign in
          </a>
        </li>
        <li class="nav-item" *ngIf="logged == false">
          <a
            routerLink="/auth/register"
            routerLinkActive="active"
            title="Sign up"
            class="nav-button-link"
          >
            Create free account
          </a>
        </li>
        <li class="nav-item" *ngIf="logged">
          <a
            routerLink="/panel/dashboard"
            routerLinkActive="active"
            title="Dashboard"
            class="nav-button-link"
          >
            My account
          </a>
        </li>
        <li class="nav-item" *ngIf="logged">
          <a (click)="logout()" title="Logout" class="nav-link">
            Logout
          </a>
        </li>
      </ul>
      ...
    </nav>
  </div>
</div>

But when I click on logout link, the header still shows me the "My account" and "Logout" links.

Also, here's the getUser method from auth service:

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  private user$ = new BehaviorSubject<User | null>(null);

  constructor(private http: HttpClient, private tokenStorage: TokenStorage) {}

  setUser(user: User | null): void {
    if (user) this.user$.next(user);
  }

  getUser(): Observable<User | null> {
    return this.user$.asObservable();
  }

  signOut(): void {
    this.tokenStorage.signOut();
    this.setUser(null);
  }
}

Answer 1

From your signOut method you are calling setUser with null Value. And in setUser you have check if(user), this condition will fail. Hence it will not call subject.next. Change your signout method to:-

  signOut(): void {
    this.tokenStorage.signOut();
    this.user$.next(null);
  }