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'}
  ]}
];

Answer 2

In Angular 4 (and probably also in Angular 2) you can do:

const routes: Route[] = [
  {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'},
  {
    path: 'admin',
    children: [
      {
        path: '', component: DefaultLayoutComponent,
        children: [
          {path: 'dashboard', component: DashboardComponent}
        ]
      },
      {
        path: '',
        children: [
          {path: 'login', component: LoginComponent}
        ]
      }
    ]
  }
]

By using path: '' you won't have to invent different url namespaces in order to use a simple layout. This is what the views look like:

index.html:

<router-outlet>

default-layout.html:

<div class="sidebar"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>

Answer 3

Another simple way is define children routes:

const appRoutes: Routes = [
  {
    path: 'fullLayout',
    component: FullLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }, {
    path: 'simpleLayout',
    component: SimpleLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }
];

/fullLayout/view - shows full layout structure

/simpleLayout/view - shows simple layout structure

app.component.html

<router-outlet></router-outlet>

full-layout.component.html

<h1>Full layout</h1>
<router-outlet></router-outlet>
<h1>FOOTER</h1>

simple-layout.component.html

<h1>Simple layout</h1>
<router-outlet></router-outlet>