title: rendering different templates in angular2
body: <p>I have just started using <code>angular2</code> and I am facing some situation to organize my logic. I am actually refactoring <code>backend theme</code> that consists of the two main components i.e <code>login view</code> that is supposed to appear on page load and <code>main dashboard</code> that will appear on successful login. I have no problem with the <code>main dashboard</code> template because i have refactored all the code its working fine. However the main problem is with the <code>login</code> module because <code>dashboard</code> consist of the <code>sidebar</code>, <code>header</code> and <code>maincontent</code> area.  My real problem is that how do I exclude <code>sidebar</code>, <code>header</code> on loading the login page which will going to be the startpoint of my app.  To be more precise, can i use the layout for the <code>login module</code> which is independent to the <code>dashboard module</code>? Here is my current code for the dashboard.
  I would really appreciate if anyone could help me structure this app in proper way. </p>
  
  <p>P.S I am using <code>node</code> as a backend</p>
  
  <p><code>index.html</code></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
  
  
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;base  href="/"&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('app/main').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;parent&gt;
         Loading...
      &lt;/parent&gt;
  
      &lt;!-- START SCRIPTS --&gt;
          &lt;!-- START PLUGINS --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>app.component.ts</code></p>
  
  <pre><code>import { Component, NgZone } from '@angular/core';
  import { HeaderComponent } from './header/header.component';
  import { SidebarComponent } from './sidebar/sidebar.component';
  import { AuthComponent } from './auth/auth.component';
  import { ListComponent } from './blogs/list.component';
  import {RouteConfig, ROUTER_DIRECTIVES, Router, AuxRoute} from '@angular/router-deprecated';
  
  @Component({
    selector: 'parent',
    templateUrl:'app/main.html',
    directives: [ROUTER_DIRECTIVES, HeaderComponent, SidebarComponent, AuthComponent]
  })
  
  
  @RouteConfig([
          { path: '/list', name: 'BlogList', component: ListComponent}
  
  ])
  
  
  export class AppComponent { 
       constructor(private _router: Router , private _zone:NgZone){}
  }
  </code></pre>
  
  <p><code>main.ts</code></p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  import { AppComponent } from './app.component';
  import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
  bootstrap(AppComponent,[ROUTER_PROVIDERS]);
  import {NgZone, enableProdMode} from '@angular/core'
  </code></pre>
  
  <p><code>main.html</code></p>
  
  <pre><code>&lt;div class="page-container"&gt;
      &lt;div class="page-sidebar"&gt;
          &lt;mysidebar&gt;
          &lt;/mysidebar&gt;
      &lt;/div&gt;
      &lt;div class="page-content"&gt;
          &lt;myheader&gt;
          &lt;/myheader&gt;
          &lt;!-- PAGE CONTENT WRAPPER --&gt;
          &lt;div class="page-content-wrap"&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>