Unable to get values from Service in Angular

I have created and application with Login Functionality and want to get the logged In user name in the components

Service File:

login({ username, password }: any): Observable<any> {
if (username === 'admin@gmail.com' && password === 'admin123') {
this.setToken('abcdefghijklmnopqrstuvwxyz');
**this.username1 = username;**
this.setUserName(username);
return of({ name: 'Papun Sahoo', email: 'admin@gmail.com' });
}
return throwError(new Error('Failed to login'));


}

On the Component I am trying to access the value

userName?:string;
constructor(private observer: BreakpointObserver, private router: Router,private loginService: LoginService) {
**this.userName = this.loginService.getUserName()!;**
console.log("From Component :"+this.loginService.username1);
}


but i am getting Undefined here

From Component :undefined

StackBlitz Link to Reproduce

Any help would be appreciated

Continue reading...