CODEWITHSUNDEEP
angularangular2-routing
elranu
elranu

Reputation: 2312

Navigate outside router-outlet

I have followed the official documentation: https://angular.io/docs/ts/latest/guide/router.html

But when I want to navigate to LoginComponent inside the AuthGuard, I do not want to navigate inside the parent component (AppComponent) that holds router-outlet tag. I want to redirect the LoginComponent outside the parent component(AppComponent) that has router-outlet tag. As a single, stand-alone component LoginComponent, I do not want that the LoginComponent has the master html of the AppComponent.

Is this possible? how? Full example: http://plnkr.co/edit/34ajPEi1OucEXNw4L2Do?p=preview

Update: Also when I tried in the AppComponent.html to condition the router-outlet as the following:

<div *ngIf="isAuth()">
<h1 class="title">Head Router</h1>
<router-outlet></router-outlet>
</div>
<div *ngIf="!isAuth()"><app-login></app-login></div>

on the console I get the following error:

browser_adapter.ts:82EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'LoginComponent'

full error example: http://plnkr.co/edit/rEEZrB?p=preview

Upvotes: 0

Views: 1331

Answers (1)

user2832323
user2832323

Reputation: 163

I think what you want is not possible. I think you would need to create another master html file and bootstrap your standalone component there. Then navigate to the url of this new file. Another option would be hiding the unwanted nodes (using *ngClass='{"hidden":is_login}' ) or something similar in your main component.

Upvotes: 0

Related Questions