Angular 2 render page without router-outlet

3

votes

I have HTML template with slide menu and top nav menu and block for render main path page. like this:

...
<div class="content-wrapper">
    <router-outlet></router-outlet>
</div>
...

But after it, my login page render in this content-wrapper block. How to write some code for render LoginPage without route-outline component? (for not render top nav and slide menus)

angular

4

votes

Keep the router-outlet, but use the router guards to prevent the route from being rendered unless the user logged in. I blogged about it here:

https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

2

votes

The correct solution to your problem is not go around router-outlet, but using one extra component (lets call it RootComponent) with router-outlet (RO1), but without nav and side menu. In RO1 you should load either your component NavMenuComponent (with the nav, side menu and its own router-outlet RO2). Then you can use child routes to ensure that in RO1 in RootComponent is loaded either NavMenuComponent (which will have nav and side menu) or LoginComponent (which will have no nav and side menu). In RO2 will be loaded the content as you have it now.

Assuming RootComponent is the deafult component in your module, routes will look like this:

 const appRoutes: Routes = [

  { path: 'login', component: LoginComponent },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },

  {
    path: 'app', component: NavMenuComponent,
    children: [
      { path: 'youorldpath1', component: YourOld1Component }, //the path will /app/youroldpath1 instead of /youroldpath1
      { path: 'youorldpath2', component: YourOld2Component, canActivate: [CanActivateViaAuthGuard] },
      { path: '**', component: ErrorComponent }
    ]
  },

  { path: '**', component: ErrorComponent }

];

RootComponent can have only :

<router-outlet></router-outlet>

More info here: https://angular.io/guide/router#child-routing-component

1

votes

If I'm understanding your question, you want to hide the Top Nav and Slide Menu from users that aren't logged in.

My method for doing this is to pull those controls/components out of the pages you are rendering in the <router-outlet></router-outlet> and then hide them until a user is logged in (probably via a boolean property on the authentication service that shows a user has successfully logged in).

So something similar to this:

<div class="content-wrapper">
    <top-nav *ngIf="authenticationService.userLoggedIn"></top-nav>
    <slide-menu *ngIf="authenticationService.userLoggedIn"></slide-menu>
    <router-outlet></router-outlet>
</div>

The login page renders in the router outlet, and when a user logs in successfully, the flag is set on the service, and the next page is rendered and the Top Nav/Slide Menu are added to the DOM.

If I'm way off base, let me know and maybe I can still help out

0

votes

This is the solution working in my app.

Create Login component with just login page content.

Create TopNav Component.

Create SideNav Component.

Create The other component(Lets say Admin) you want to show after Login with Top Nav, Side Nav and other Stuff you want to show to the logged in users.

Route them in the Module like this...

  {
    path: 'login',
    component: LoginComponent
  },
  {
   path: 'admin', 
   component: AdminComponent
 }

app.component.html

<router-outlet>

  <!-- When your route is '/login' login component rendered here.
  If it is '/admin' admin component rendered here -->
<router-outlet>

login.component.html

//login page content

admin.component.html

 <app-top-nav></app-top-nav>
 <app-side-nav></app-side-nav>
 <div class="content-wrapper">
     <router-outlet>
       <!-- Whatever route you map in top-nav and side-nav will be rendered here -->
    </router-outlet>
 </div>

Angular 2 render page without router-outlet

4 Answers