Navigation doesn't update after value changed (Angular)

Question

I'm currently working on my first Angular project and encountering issues with updating my HTML dropdown menu in the header when a user logs in. Unfortunately, it’s not functioning as expected.

The dropdown menu should show "Login" when the user is not logged in. When the user logs into their account, the dropdown should change to "Details" and "Logout".

Right now, it only shows "Login" in the dropdown menu and doesn’t update when the user logs in.

I have already checked if the observable in login-authentication.service.ts receives the correct value after the user logs in, and it does. However, the subscription in the app.component.ts only updates the status/value of the subscribed observable at the beginning, and not again when the user logs in and the value changes.

I've temporarily placed the dropdown menu in app.component. My observable variable isUserLoggedIn$ resides in login-authentication.service.

Here's my header with the dropdown menu:

  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a *ngIf="!isLoggedIn" routerLink="/login">Login</a>
      <a *ngIf="isLoggedIn" routerLink="/kundenkonto">Details</a>
      <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
    </div>
  </div>

The app.component.ts:

export class AppComponent implements OnInit {
  title = 'auto-kino';
  isLoggedIn: boolean = false;

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

  ngOnInit() {
    this.authService.isUserLoggedIn$.subscribe(loggedIn => {
      this.isLoggedIn = loggedIn;
    });
  }
}

Login Componenent.ts --> Update

  login(): void {
    this.isFormSubmittedLogin = true;

    if (this.userForm.invalid) {
      return;
    }

    const { mail, passwort } = this.userForm.value;

    this.loginautService.login(mail, passwort).subscribe(response => {
      if (response.success) {
        console.log("Login erfolgreich");
        this.router.navigate(['/kundenkonto']);
      } else {
        this.errorMessageLogin = response.message;
        console.log("Login fehlgeschlagen");
      }
    });
  }

The login-authentication.service

export class LoginAuthenticationService {
  private isUserLoggedInSubject = new BehaviorSubject<boolean>(false);
  isUserLoggedIn$ = this.isUserLoggedInSubject.asObservable();

  public currentUser: any = {}; 

  constructor(private http: HttpClient) { }

  login(mail: string, passwort: string): Observable<any> {
    return new Observable(observer => {
      this.http.post<any>('http://127.0.0.1:8080/loginaut', { mail, passwort }).subscribe(
        (response: any) => {
          if (response.success) {
            this.isUserLoggedInSubject.next(true); 
            this.currentUser = response.user; 
            localStorage.setItem('isUserLoggedIn', this.isUserLoggedInSubject ? "true" : "false");
            localStorage.setItem('user', JSON.stringify(this.currentUser)); 
            observer.next(response);
          } else {
            observer.next(response);
          }
          observer.complete();
        },
        (error) => {
          observer.error(error);
          observer.complete();
        }
      );
    });
  }

I've tried adjusting the setup based on suggestions from this post, but my structure of the code was/is a bit different so I could't copy it 1:1. Furthermore the async didn't work as well. I tried that already. Component inside app.component.html not updating

Any help would be highly appreciated! :)

---

SOLUTION:

I declared another instance of the LoginAuthenticationService in the login.component.ts in the decorator. Although I already created one in the service itself with @Injectable({ providedIn: 'root'}) and provide it at the root level of the Angular application. When I delete it it suddenly works.

Answer 1

Your code works like you wish in my Stackblitzapp. Maybe you see sth thats different to yours. I made an lighter version.