On the home page, I am checking the login status, and depends on that status I am showing/hiding some components. It is working fine for the first time.
If the user is not logged in it is showing the "sign in component" instead of the "SiteLogin" slot. But after the login process, it is not showing the other component until I do reload manually(After the reload it is showing the correct component).
Again if I do Signout it is showing the default signin / login link instead of showing my custom component(After reloading the page it is also showing the correct component).
Is there any way to fix this (or) any alternate way to achieve the same functionality?
app.component.html
<cx-storefront></cx-storefront>
<ng-container *ngIf="user$ | async as user; else login">
<cx-page-slot position="HeaderLinks"></cx-page-slot>
</ng-container>
<ng-template #login>
<ng-template cxOutletRef="SiteLogin">
<app-signin-menu></app-signin-menu>
</ng-template>
</ng-template>
app.component.ts
export class AppComponent implements OnInit{
user$: Observable<User>;
constructor(
private auth: AuthService, private userService: UserService
) {}
ngOnInit(){
this.user$ = this.auth.isUserLoggedIn().pipe(
switchMap((isUserLoggedIn) => {
if (isUserLoggedIn) {
return this.userService.get();
} else {
return of(undefined);
}
})
);
}
}