title: Multiple layout for Angular2 using Routing
body: <p>I'm building my website with Angular2 using Routing.</p>
  
  <p>I faced a problem: how do I using multiple layout for my Angular2 app using Router.</p>
  
  <p>For example: I have at least 2 layout such as Login, Signup... (1 column) and Home, Profile... (1 header, 2 columns, 1 footer).
  My code for <code>index.html</code>:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;base href="/"&gt;
          &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="styles/main.css"&gt;
  
          &lt;!-- 1. Load libraries --&gt;
          &lt;!-- IE required polyfills, in this exact order --&gt;
          &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;
  
          &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  
          &lt;!-- 2. Configure SystemJS --&gt;
          &lt;script&gt;
              System.config({
                  packages: {
                      app: {
                          format: 'register',
                          defaultExtension: 'js'
                      }
                  }
              });
              System.import('app/main')
              .then(null, console.error.bind(console));
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;!-- 3. Display the application --&gt;
      &lt;body&gt;
          &lt;app&gt;Loading...&lt;/app&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And code for <code>app.component.ts</code>:</p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  import { Router, RouteConfig, RouteData, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'
  import { AuthComponent } from './common/auth.component'
  import { BlankComponent } from './common/blank.component'
  
  @Component({
      selector: 'app',
      template:
          `
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          `
      ,
      directives: [
          ROUTER_DIRECTIVES,
          ],
      providers: [
          ROUTER_PROVIDERS,
          RouteData,
          AuthComponent,
          BlankComponent,
      ]
  })
  
  @RouteConfig([
      {
          path: '/',
          name: 'Login',
          data: {base: 'blank', 'login': false},
          component: BlankComponent,
          useAsDefault: true
      },{
          path: '/home',
          name: 'Home',
          data: {base: 'auth', 'login': true},
          component: AuthComponent,
      },
  ])
  
  export class AppComponent implements OnInit{
      constructor(
          private _router: Router,
          private _routeData: RouteData){
      }
      ngOnInit(){
           // Some init action
      }
  }
  </code></pre>
  
  <p>Every time I go to a route, the <code>&lt;route-outlet&gt;</code> will show corresponding component but I don't want to layout every component the whole app structure.</p>