Angular 18: Html not updating from component.ts

in my auth.service.ts, I log in and return a user token from the api, which I decode in Angular:

public userName: string = 'Guest';

getUserInfo(): any {
const token = this.getToken();
if (token) {
var decToken = this.decodeToken(token);
this.userName = decToken.unique_name;
this.userID = decToken.nameid;
this.height = parseFloat(decToken.height);
this.weight = parseFloat(decToken.weight);
this.bmr = parseFloat(decToken.bmr);
this.age = parseInt(decToken.age);
return decToken;
}
return null;
}


The app.component should then pick this up:

ngOnInit() {
this.cdr.detectChanges();
console.log(this.authService.isLoggedIn());
if (this.authService.isLoggedIn()) {
console.log('You are in');
const userInfo = this.authService.getUserInfo();
this.isUserLoggedIn = this.authService.isLoggedIn();
this.userName = this.authService.userName;

}


Which is then displayed on the app.component.html:

<label style="float:right">{{greeting}} <i>{{userName}}</i></label><br />


It doesn't work. You log in and you're still 'guest', even if you change components, until you refresh the page. Until then, the authServices.isLoggedIn() returns false:

isLoggedIn(): boolean {
if (localStorage.getItem('token') == undefined) {
return false;
}
return true;
}


even though the localStorage item DOES have the 'token' object.

Anyone seen this before?

Continue reading...