How to switch layouts in Angular2

Question

What is the best practices way of using two entirely different layouts in the same Angular2 application? For example in my /login route I want to have a very simple box horizontally and vertically centered, for every other route I want my full template with header, content and footer.

Answer 1

In your main component html you can add the following routes outlet which you will use to switch layout.

<router-outlet name="header"></router-outlet>
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>

In this case you can configure your routes to switch the header, navbar if any and footer of your app when page changes. The following is an example of how you can configure your routes.

Example 1 Lets assume the first layout has only header and footer without any sidebar/navbar

export const welcome_routes: RouterConfig = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];

Example 2. This is your routes config for your second layout

 export const next_layout_routes: RouterConfig = [
  { path: 'go-to-next-layout-page', children:[
     { path: 'home', component: HomeComponent},
     { path: '' , component: Header2Component, outlet: 'header'}
     { path: '' , component: NavBar2Component, outlet: 'navbar'}
     { path: '' , component: Footer2Component, outlet: 'footer'}
  ]}
];

With this its very easy to add a third and a fourth and a ... layout to your page.

Hope this helps

** Updated **

RouterConfig has been changed to Routes.

So the code above will now be

export const welcome_routes: Routes = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];