Different layout for angular2 login page

Question

I have a normal layout with a toolbar and sidebar for all my pages, but they should not be visible when the user goes to the login or registration page. In AngularJS, it was easy with ui-router to include a route to all other pages where you could define a layout.

But how to do it in Angular2 with your own router? Should I use a ngIftoolbar and sidebar to display or is there a better way?

Answer 1

Perhaps with a childrenroute attribute :

export const routes:RouterConfig = [
  //includes the login and registration route
  ...userRoutes,
  {
    path: '',
    //checks if the user is logged in
    canActivate: [Auth],
    //only contains a <route-outlet />
    component: LayoutComponent,
    //routes like /dashboard will only accessible when Auth returns true
    children: [
      //all children are 'protected'
      ...modulRoutes,
      ...dashboardRoutes,
    ]
  },
  //404 handling
  ...errorRoutes
];

I used angular2 router 3.0