CODEWITHSUNDEEP
angular
Taras Kovalenko
Taras Kovalenko

Reputation: 2393

Angular 2 render page without router-outlet

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)

Upvotes: 5

Views: 13962

Answers (4)

Arul Rozario
Arul Rozario

Reputation: 759

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>

Upvotes: 0

Ondrej Peterka
Ondrej Peterka

Reputation: 3427

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

Upvotes: 3

Yakov Fain
Yakov Fain

Reputation: 12376

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/

Upvotes: 4

Dave V
Dave V

Reputation: 1976

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

Upvotes: 1

Related Questions