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 hori

Answer 1

I strongly recommend reading the tutorial by the Angular team on routing here.

There is some setup that you will need to implement, but some of the key steps are:

• Create an app.routes.js file where you specify the route name and the component that should be loaded when that route is hit.

  import { provideRouter, RouterConfig }  from '@angular/router';
  import { LoginComponent } from 'components/login.component'
  
  const routes: RouterConfig = [
    {
      path: '/login', //name of the route
      component: LoginComponent //component to load when route is hit
    }
  ];
  
  export const appRouterProviders = [
    provideRouter(routes)
  ];
  

• In the master component where you will click a link (i.e the nav-bar), you will need to add [routerLink]= 'myRouteName' (e.g '/login') and a pair of router-outlet tags which is where the new component (aka view) will be inserted.

  import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
    selector: 'nav-bar',
    template: `
      <h1>{{title}}</h1>
      <a [routerLink]="['/login']">Login</a>
      <router-outlet></router-outlet>
     `,
    directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent {
  
  }
  

Hope that helps. I've been learning angular 2 over the last month, and the documentation on angular.io has been invaluable. Really clear, step-by-step explanations on a lot of aspects, and a good first stop when getting into a new topic.

Answer 2

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 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>

Answer 4

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>