Template not reacting to AngularFire Signout

Trying to follow a slightly outdated linkedin learning path for working with firebase. I have implemented a register page which navigates the user to a profile page and is meant to drive the navigation bar e.g if not signed in, show login/sign up buttons, if logged in.. show a log out button. When i press my logout button, it calls firebase but my ui doesn't change e.g the logout button persists / isLoggedIn$ always appears as true:

<div class="navbar-end">
@if((isLoggedIn$ | async) === false){
<a
routerLink="/auth/login"
class="hidden lg:inline-block lg:mr-3 py-2 px-6 bg-gray-50 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-xl transition duration-200"
href="#"
>Sign In</a
><a
routerLink="/auth/register"
class="hidden lg:inline-block lg:mr-3 py-2 px-6 bg-gray-50 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-xl transition duration-200"
href="#"
>Sign up</a
>
} @else {
<a
class="hidden lg:inline-block lg:mr-3 py-2 px-6 bg-red-400 hover:bg-red-600 text-sm text-white font-bold rounded-xl transition duration-200"
href="#"
(click)="logout()"
>Logout</a
>
}
{{ isLoggedIn$ | async }}
</div>


and the component:

export class NavigationComponent {
fireService = inject(AngularFireAuth);
isLoggedIn$ = !!this.fireService.currentUser;

logout() {
this.fireService.signOut();
console.log('Logging out');
}
}

Continue reading...