Router with Observable parameter which used in *ngif is not working

[Ruchin Kumar]

Hi, Router is not working when *ngif parameter is Observable. Please advice.

sidebar.component.html

<router-outlet *ngIf="!isLoggedIn"></router-outlet>

sidebar.component.ts

sidebar.component.ts

// this.isLoggedIn = true; // In this case router works and redirect to other pages.

this.apiService.isLoggedIn.asObservable().subscribe(

// In this case router changing the url but not loading template

(data: boolean) => {

this.isLoggedIn = data;

}

);

[Sander Elias]

Hi Ruchin,

This is because your apiService.isLogin is async. The router starts 'routing' only after the router-outlet is available.

what happens is, your route to `/someRoute`. Router-outlet is not in the template. nothing happens.

Afterward, your login result comes back, the outlet gets added to the view. there are no routing events, so nothing happens.

This kind of security is better solved with a routerGuard.

Regards

Sander

[Ruchin Kumar]

Hi Sander,

Thanks. Issue resolved by this suggestion .