Angular 2: loading different component on same route with conditions?

Question

Is there any way so that I can load different component on the same route(in my case the root route).

Basically I want to see if the user is logged in, if he is logged in, the dashboard component will be loaded, if is he not logged in, the home component will be loaded

And again just to make the question clear, I don't want to redirect the user to a DIFFERENT route using auth guards. I want to load different components on the same route

Answer 1

If you don't want to use guards and this is what you mentioned in your question, you can simply use ngIf.

Example:

<div *ngIf="this.authService.hasPermissionForDashboard()">
 <app-dashboard><app-dashboard>
</div>
<div *ngIf="this.authService.hasNotPermissionForDashboard()">
 <app-home><app-home>
</div>