diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index 6ac5c09235..8bf356486e 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -369,7 +369,7 @@ body {
 
 #content li a,
 #content p a {
-  color: #0808df;
+  /*color: #0808df;*/
   text-decoration: none;
 }
 
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
index 0d82865a80..b115536562 100644
--- a/demo/components/accordion-section.ts
+++ b/demo/components/accordion-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {AccordionDemoComponent} from './accordion/accordion-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/accordion/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
 
 @Component({
   selector: 'accordion-section',
-  directives: [DemoSection, AccordionDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, AccordionDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <accordion-demo></accordion-demo>
     </demo-section>`
 })
 export class AccordionSectionComponent {
-  private name:string = 'Accordion';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Accordion';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
index 60475cbb08..3ab991a5d2 100644
--- a/demo/components/alert-section.ts
+++ b/demo/components/alert-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {AlertDemoComponent} from './alert/alert-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/alert/readme.md');
@@ -12,17 +12,17 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
 
 @Component({
   selector: 'alert-section',
-  directives: [DemoSection, AlertDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, AlertDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <alert-demo></alert-demo>
     </demo-section>`
 })
 export class AlertSectionComponent {
-  private name:string = 'Alerts';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Alerts';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts
index acb01eb82d..a567fb3493 100644
--- a/demo/components/buttons-section.ts
+++ b/demo/components/buttons-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {ButtonsDemoComponent} from './buttons/buttons-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/buttons/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
 
 @Component({
   selector: 'buttons-section',
-  directives: [DemoSection, ButtonsDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, ButtonsDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <buttons-demo></buttons-demo>
     </demo-section>`
 })
-
-  private name:string = 'Buttons';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class ButtonsSectionComponent {
+  public name:string = 'Buttons';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts
index 0fbca29aa9..f7f4dc5514 100644
--- a/demo/components/carousel-section.ts
+++ b/demo/components/carousel-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {CarouselDemoComponent} from './carousel/carousel-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/carousel/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
 
 @Component({
   selector: 'carousel-section',
-  directives: [DemoSection, CarouselDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, CarouselDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <carousel-demo></carousel-demo>
     </demo-section>`
 })
 export class CarouselSectionComponent {
-  private name:string = 'Carousel';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Carousel';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts
index eb3054cc74..f1d1464674 100644
--- a/demo/components/collapse-section.ts
+++ b/demo/components/collapse-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {CollapseDemoComponent} from './collapse/collapse-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/collapse/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
 
 @Component({
   selector: 'collapse-section',
-  directives: [DemoSection, CollapseDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, CollapseDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <collapse-demo></collapse-demo>
     </demo-section>`
 })
 export class CollapseSectionComponent {
-  private name:string = 'Collapse';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Collapse';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
index 08d48ca91b..77febe966e 100644
--- a/demo/components/datepicker-section.ts
+++ b/demo/components/datepicker-section.ts
@@ -1,8 +1,8 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {DatepickerDemoComponent} from './datepicker/datepicker-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/datepicker/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
 
 @Component({
   selector: 'datepicker-section',
-  directives: [DemoSection, DatepickerDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, DatepickerDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <datepicker-demo></datepicker-demo>
     </demo-section>`
 })
-
-  private name:string = 'Datepicker';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class DatepickerSectionComponent {
+  public name:string = 'Datepicker';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/demo-section.template.html b/demo/components/demo-section.template.html
index 7786676173..ae097facff 100644
--- a/demo/components/demo-section.template.html
+++ b/demo/components/demo-section.template.html
@@ -1,7 +1,7 @@
 <div class="content-header">
   <h2>{{name}}
     <a [href]="src" target="_blank">
-      <img src="/assets/images/link-doc.png" alt=""/>
+      <img src="assets/images/link-doc.png" alt=""/>
     </a>
   </h2>
 
diff --git a/demo/components/demo-section.ts b/demo/components/demo-section.ts
index f07d9c42fa..2aa0262484 100644
--- a/demo/components/demo-section.ts
+++ b/demo/components/demo-section.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 
 let template = require('./demo-section.template.html');
@@ -8,18 +8,11 @@ let template = require('./demo-section.template.html');
   directives: [TAB_DIRECTIVES],
   template: template
 })
-
-export class DemoSection {
-  @Input()
-  private name:string;
-  @Input()
-  private titleDoc:string;
-  @Input()
-  private src:string;
-  @Input()
-  private html:string;
-  @Input()
-  private ts:string;
-  @Input()
-  private doc:string;
+export class DemoSectionComponent {
+  @Input() public name:string;
+  @Input() public titleDoc:string;
+  @Input() public src:string;
+  @Input() public html:string;
+  @Input() public ts:string;
+  @Input() public doc:string;
 }
diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts
index 8337962944..113cd481d7 100644
--- a/demo/components/dropdown-section.ts
+++ b/demo/components/dropdown-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {DropdownDemoComponent} from './dropdown/dropdown-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/dropdown/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
 
 @Component({
   selector: 'dropdown-section',
-  directives: [DemoSection, DropdownDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, DropdownDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <dropdown-demo></dropdown-demo>
     </demo-section>`
 })
-
-  private name:string = 'Dropdowns';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class DropdownSectionComponent {
+  public name:string = 'Dropdowns';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/getting-started/getting-started.ts b/demo/components/getting-started/getting-started.ts
index 7cd21ac55a..9f3c371917 100644
--- a/demo/components/getting-started/getting-started.ts
+++ b/demo/components/getting-started/getting-started.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 let name = 'First of all, Welcome!';
 
@@ -14,11 +14,10 @@ let readingDocumentation = require('./reading-documentation.md');
   selector: 'accordion-section',
   template: template
 })
-
-export class GettingStartedSection {
-  private name:string = name;
-  private desc:string = desc;
-  private dependencies:string = dependencies;
-  private installation:string = installation;
-  private readingDocumentation:string = readingDocumentation;
+export class GettingStartedSectionComponent {
+  public name:string = name;
+  public desc:string = desc;
+  public dependencies:string = dependencies;
+  public installation:string = installation;
+  public readingDocumentation:string = readingDocumentation;
 }
diff --git a/demo/components/main-menu/main-menu.component.ts b/demo/components/main-menu/main-menu.component.ts
index 9465e95ddf..354f064450 100644
--- a/demo/components/main-menu/main-menu.component.ts
+++ b/demo/components/main-menu/main-menu.component.ts
@@ -1,8 +1,8 @@
-import {Component, Inject} from 'angular2/core';
-import {RouterLink, Router} from 'angular2/router';
+import {Component, Inject} from '@angular/core';
+import {RouterLink, Router} from '@angular/router-deprecated';
 
-import {config} from './../../config';
-import {SearchFilter} from './search-filter.pipe';
+import {routes} from './../../config';
+import {SearchFilterPipe} from './search-filter.pipe';
 
 // webpack html imports
 let template = require('./main-menu.template.html');
@@ -11,15 +11,15 @@ let template = require('./main-menu.template.html');
   selector: 'main-menu',
   template: template,
   directives: [RouterLink],
-  pipes: [SearchFilter]
+  pipes: [SearchFilterPipe]
 })
 
 export class MainMenuComponent {
-  private routes:any = config.routes;
-  private router:Router;
-  private search:any = {};
+  public routes:any = routes;
+  public router:Router;
+  public search:any = {};
 
-  constructor(@Inject(Router) router:Router) {
+  public constructor(@Inject(Router) router:Router) {
     this.router = router;
   }
 }
diff --git a/demo/components/main-menu/main-menu.template.html b/demo/components/main-menu/main-menu.template.html
index f67271ff95..e32f12948b 100644
--- a/demo/components/main-menu/main-menu.template.html
+++ b/demo/components/main-menu/main-menu.template.html
@@ -3,13 +3,13 @@
     <input type="text" name="search" placeholder="Search..." [(ngModel)]="search.text"/>
   </div>
   <div class="main-menu-container">
-    <div class="menu-content">
+    <div class="menu-content" *ngIf="routes && routes.length">
       <div class="section"
-           *ngFor="#route of routes | SearchFilter:search.text"
+           *ngFor="let route of routes | SearchFilter:search.text"
            [class.active]="router.isRouteActive(router.generate([route.name]))">
         <h3 [routerLink]="[route.name]">{{route.name}}</h3>
 
-        <div class="item">
+<!--        <div class="item">
           <h4>
             <span [routerLink]="[route.name]">Example</span>
           </h4>
@@ -25,7 +25,7 @@ <h4>
           <h4>
             <span [routerLink]="[route.name]">Properties</span>
           </h4>
-        </div>
+        </div>-->
       </div>
     </div>
   </div>
diff --git a/demo/components/main-menu/search-filter.pipe.ts b/demo/components/main-menu/search-filter.pipe.ts
index 2c5efc4eb2..9e01a8b484 100644
--- a/demo/components/main-menu/search-filter.pipe.ts
+++ b/demo/components/main-menu/search-filter.pipe.ts
@@ -1,21 +1,16 @@
-import {Pipe} from 'angular2/core';
-
-@Pipe({
-  name: 'SearchFilter'
-})
-
-export class SearchFilter {
-  transform(value:any, args:any) {
-    let [text] = args;
+import {Pipe, PipeTransform} from '@angular/core';
 
+@Pipe({name: 'SearchFilter'})
+export class SearchFilterPipe implements PipeTransform {
+  public transform(value:any, text:any):any {
     if (!text) {
       return value;
     }
 
-    var items:any = value;
-    var newItems:any = [];
+    const items:any = value;
+    const newItems:any = [];
 
-    items.forEach(function (item:any) {
+    items.forEach(function (item:any):void {
       if (item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1) {
         newItems.push(item);
       }
diff --git a/demo/components/modal-section.ts b/demo/components/modal-section.ts
index b033f7365c..e1910a2d1f 100644
--- a/demo/components/modal-section.ts
+++ b/demo/components/modal-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {ModalDemoComponent} from './modal/modal-demo';
-
-let name = 'Modals';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/modal/';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/modal/readme.md');
@@ -14,53 +11,20 @@ let titleDoc = require('../../components/modal/title.md');
 let ts = require('!!prismjs?lang=typescript!./modal/modal-demo.ts');
 let html = require('!!prismjs?lang=markup!./modal/modal-demo.html');
 
-const template = `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <modal-demo></modal-demo>
-      </div>
-    </div>
-    
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-    
-    <br/>
-      
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `;
-
 @Component({
   selector: 'modal-section',
-  template: template,
-  directives: [ModalDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+  directives: [ModalDemoComponent, DemoSectionComponent, CORE_DIRECTIVES],
+  template: `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <modal-demo></modal-demo>
+    </demo-section>`
 })
 export class ModalSectionComponent {
+  public name:string = 'Modals';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/master/components/modal';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
+
 }
diff --git a/demo/components/pagination-section.ts b/demo/components/pagination-section.ts
index 80e06520f0..889c8c56cf 100644
--- a/demo/components/pagination-section.ts
+++ b/demo/components/pagination-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {PaginationDemoComponent} from './pagination/pagination-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/pagination/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./pagination/pagination-demo.html');
 
 @Component({
   selector: 'pagination-section',
-  directives: [DemoSection, PaginationDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, PaginationDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <pagination-demo></pagination-demo>
     </demo-section>`
 })
-
-  private name:string = 'Pagination';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/pagination';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class PaginationSectionComponent {
+  public name:string = 'Pagination';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/pagination';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/progressbar-section.ts b/demo/components/progressbar-section.ts
index b6465832d9..4ccbb867e2 100644
--- a/demo/components/progressbar-section.ts
+++ b/demo/components/progressbar-section.ts
@@ -3,7 +3,7 @@ import {CORE_DIRECTIVES} from '@angular/common';
 
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../../ng2-bootstrap';
 import {ProgressbarDemoComponent} from './progressbar/progressbar-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/progressbar/readme.md');
@@ -20,17 +20,17 @@ let html = templates[Ng2BootstrapConfig.theme];
 
 @Component({
   selector: 'progressbar-section',
-  directives: [DemoSection, ProgressbarDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, ProgressbarDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <progressbar-demo></progressbar-demo>
     </demo-section>`
 })
-
-  private name:string = 'Progressbar';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class ProgressbarSectionComponent {
+  public name:string = 'Progressbar';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/rating-section.ts b/demo/components/rating-section.ts
index e2622247c4..fb5c57ac6c 100644
--- a/demo/components/rating-section.ts
+++ b/demo/components/rating-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {RatingDemoComponent} from './rating/rating-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/rating/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./rating/rating-demo.html');
 
 @Component({
   selector: 'rating-section',
-  directives: [DemoSection, RatingDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, RatingDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <rating-demo></rating-demo>
     </demo-section>`
 })
-
-  private name:string = 'Rating';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/rating';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class RatingSectionComponent {
+  public name:string = 'Rating';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/rating';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/tabs-section.ts b/demo/components/tabs-section.ts
index 516cd36095..dfccdf4a8b 100644
--- a/demo/components/tabs-section.ts
+++ b/demo/components/tabs-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TabsDemoComponent} from './tabs/tabs-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/tabs/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./tabs/tabs-demo.html');
 
 @Component({
   selector: 'tabs-section',
-  directives: [DemoSection, TabsDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, TabsDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <tabs-demo></tabs-demo>
     </demo-section>`
 })
-
-  private name:string = 'Tabs';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tabs';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class TabsSectionComponent {
+  public name:string = 'Tabs';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tabs';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/timepicker-section.ts b/demo/components/timepicker-section.ts
index 50ba2d246f..8eca6f5755 100644
--- a/demo/components/timepicker-section.ts
+++ b/demo/components/timepicker-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TimepickerDemoComponent} from './timepicker/timepicker-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/timepicker/readme.md');
@@ -13,18 +13,17 @@ let html = require('!!prismjs?lang=markup!./timepicker/timepicker-demo.html');
 
 @Component({
   selector: 'timepicker-section',
-  directives: [DemoSection, TimepickerDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, TimepickerDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <timepicker-demo></timepicker-demo>
     </demo-section>`
 })
-
-
-  private name:string = 'Timepicker';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/timepicker';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class TimepickerSectionComponent {
+  public name:string = 'Timepicker';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/timepicker';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/tooltip-section.ts b/demo/components/tooltip-section.ts
index 3d55a421cc..0c5a547177 100644
--- a/demo/components/tooltip-section.ts
+++ b/demo/components/tooltip-section.ts
@@ -2,10 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TooltipDemoComponent} from './tooltip/tooltip-demo';
-import {DemoSection} from './demo-section';
-
-let name = 'Tooltip';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/tooltip/readme.md');
@@ -16,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./tooltip/tooltip-demo.html');
 
 @Component({
   selector: 'tooltip-section',
-  directives: [DemoSection, TooltipDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, TooltipDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <tooltip-demo></tooltip-demo>
     </demo-section>`
 })
-
-  private name:string = 'Tooltip';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class TooltipSectionComponent {
+  public name:string = 'Tooltip';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/components/top-menu/top-menu.component.ts b/demo/components/top-menu/top-menu.component.ts
index b416039c36..ae6de21e4a 100644
--- a/demo/components/top-menu/top-menu.component.ts
+++ b/demo/components/top-menu/top-menu.component.ts
@@ -1,5 +1,5 @@
-import {Component} from 'angular2/core';
-import {RouterLink} from 'angular2/router';
+import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router-deprecated';
 
 // webpack html imports
 let template = require('./top-menu.template.html');
@@ -9,6 +9,5 @@ let template = require('./top-menu.template.html');
   template: template,
   directives: [RouterLink]
 })
-
 export class TopMenuComponent {
 }
diff --git a/demo/components/top-menu/top-menu.template.html b/demo/components/top-menu/top-menu.template.html
index 2c7c169194..c69bda2962 100644
--- a/demo/components/top-menu/top-menu.template.html
+++ b/demo/components/top-menu/top-menu.template.html
@@ -17,12 +17,12 @@ <h2>ng2-bootstrap</h2>
 
     <div class="logo">
       <a href="">
-        <img src="/assets/images/logo.png" alt="">
+        <img src="assets/images/logo.png" alt="">
       </a>
     </div>
 
     <div id="mobile-top-menu">
-      <img src="/assets/images/menu-right.svg" alt="">
+      <img src="assets/images/menu-right.svg" alt="">
     </div>
   </div>
 </div>
diff --git a/demo/components/typeahead-section.ts b/demo/components/typeahead-section.ts
index caba7012cb..2db5ce50be 100644
--- a/demo/components/typeahead-section.ts
+++ b/demo/components/typeahead-section.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TypeaheadDemoComponent} from './typeahead/typeahead-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/typeahead/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./typeahead/typeahead-demo.html');
 
 @Component({
   selector: 'typeahead-section',
-  directives: [DemoSection, TypeaheadDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, TypeaheadDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <typeahead-demo></typeahead-demo>
     </demo-section>`
 })
-
-  private name:string = 'Typeahead';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class TypeaheadSectionComponent {
+  public name:string = 'Typeahead';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }
diff --git a/demo/config.ts b/demo/config.ts
index 8085951e7b..9388c1c981 100644
--- a/demo/config.ts
+++ b/demo/config.ts
@@ -1,80 +1,83 @@
-import {GettingStartedSection} from './components/getting-started/getting-started';
-import {AccordionSection} from './components/accordion-section';
-import {AlertSection} from './components/alert-section';
-import {ButtonsSection} from './components/buttons-section';
-import {CarouselSection} from './components/carousel-section';
-import {CollapseSection} from './components/collapse-section';
-import {DatepickerSection} from './components/datepicker-section';
-import {DropdownSection} from './components/dropdown-section';
-import {PaginationSection} from './components/pagination-section';
-import {ProgressbarSection} from './components/progressbar-section';
-import {RatingSection} from './components/rating-section';
-import {TabsSection} from './components/tabs-section';
-import {TimepickerSection} from './components/timepicker-section';
-import {TooltipSection} from './components/tooltip-section';
-import {TypeaheadSection} from './components/typeahead-section';
+import {GettingStartedSectionComponent} from './components/getting-started/getting-started';
+import {AccordionSectionComponent} from './components/accordion-section';
+import {AlertSectionComponent} from './components/alert-section';
+import {ButtonsSectionComponent} from './components/buttons-section';
+import {CarouselSectionComponent} from './components/carousel-section';
+import {CollapseSectionComponent} from './components/collapse-section';
+import {DatepickerSectionComponent} from './components/datepicker-section';
+import {DropdownSectionComponent} from './components/dropdown-section';
+import {PaginationSectionComponent} from './components/pagination-section';
+import {ProgressbarSectionComponent} from './components/progressbar-section';
+import {RatingSectionComponent} from './components/rating-section';
+import {TabsSectionComponent} from './components/tabs-section';
+import {TimepickerSectionComponent} from './components/timepicker-section';
+import {TooltipSectionComponent} from './components/tooltip-section';
+import {TypeaheadSectionComponent} from './components/typeahead-section';
+import {ModalSectionComponent} from './components/modal-section';
 
-export module config {
-  export let routes = [{
-    path: '/getting-started',
-    name: 'Getting started',
-    component: GettingStartedSection,
-    useAsDefault: true
-  }, {
-    path: '/accordion',
-    name: 'Accordion',
-    component: AccordionSection
-  }, {
-    path: '/alerts',
-    name: 'Alerts',
-    component: AlertSection
-  }, {
-    path: '/buttons',
-    name: 'Buttons',
-    component: ButtonsSection
-  }, {
-    path: '/carousel',
-    name: 'Carousel',
-    component: CarouselSection
-  }, {
-    path: '/collapse',
-    name: 'Collapse',
-    component: CollapseSection
-  }, {
-    path: '/datepicker',
-    name: 'Datepicker',
-    component: DatepickerSection
-  }, {
-    path: '/dropdowns',
-    name: 'Dropdowns',
-    component: DropdownSection
-  }, {
-    path: '/pagination',
-    name: 'Pagination',
-    component: PaginationSection
-  }, {
-    path: '/progressbar',
-    name: 'Progressbar',
-    component: ProgressbarSection
-  }, {
-    path: '/rating',
-    name: 'Rating',
-    component: RatingSection
-  }, {
-    path: '/tabs',
-    name: 'Tabs',
-    component: TabsSection
-  }, {
-    path: '/timepicker',
-    name: 'Timepicker',
-    component: TimepickerSection
-  }, {
-    path: '/tooltip',
-    name: 'Tooltip',
-    component: TooltipSection
-  }, {
-    path: '/typeahead',
-    name: 'Typeahead',
-    component: TypeaheadSection
-  }];
-}
+export const routes = [{
+  path: '/getting-started',
+  name: 'Getting started',
+  component: GettingStartedSectionComponent,
+  useAsDefault: true
+}, {
+  path: '/accordion',
+  name: 'Accordion',
+  component: AccordionSectionComponent
+}, {
+  path: '/alerts',
+  name: 'Alerts',
+  component: AlertSectionComponent
+}, {
+  path: '/buttons',
+  name: 'Buttons',
+  component: ButtonsSectionComponent
+}, {
+  path: '/carousel',
+  name: 'Carousel',
+  component: CarouselSectionComponent
+}, {
+  path: '/collapse',
+  name: 'Collapse',
+  component: CollapseSectionComponent
+}, {
+  path: '/datepicker',
+  name: 'Datepicker',
+  component: DatepickerSectionComponent
+}, {
+  path: '/dropdowns',
+  name: 'Dropdowns',
+  component: DropdownSectionComponent
+}, {
+  path: '/modals',
+  name: 'Modals',
+  component: ModalSectionComponent
+}, {
+  path: '/pagination',
+  name: 'Pagination',
+  component: PaginationSectionComponent
+}, {
+  path: '/progressbar',
+  name: 'Progressbar',
+  component: ProgressbarSectionComponent
+}, {
+  path: '/rating',
+  name: 'Rating',
+  component: RatingSectionComponent
+}, {
+  path: '/tabs',
+  name: 'Tabs',
+  component: TabsSectionComponent
+}, {
+  path: '/timepicker',
+  name: 'Timepicker',
+  component: TimepickerSectionComponent
+}, {
+  path: '/tooltip',
+  name: 'Tooltip',
+  component: TooltipSectionComponent
+}, {
+  path: '/typeahead',
+  name: 'Typeahead',
+  component: TypeaheadSectionComponent
+}];
diff --git a/demo/index.ts b/demo/index.ts
index 05bc069940..f5841bb354 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -1,25 +1,11 @@
 import {Component, enableProdMode, ViewContainerRef} from '@angular/core';
-import {Component, provide, enableProdMode} from 'angular2/core';
-import {RouterOutlet, RouteConfig, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
+import {RouterOutlet, RouteConfig, ROUTER_PROVIDERS} from '@angular/router-deprecated';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';
 import {MainMenuComponent} from './components/main-menu/main-menu.component';
 import {TopMenuComponent} from './components/top-menu/top-menu.component';
-import {ButtonsSectionComponent} from './components/buttons-section';
-import {CarouselSectionComponent} from './components/carousel-section';
-import {CollapseSectionComponent} from './components/collapse-section';
-import {DatepickerSectionComponent} from './components/datepicker-section';
-import {DropdownSectionComponent} from './components/dropdown-section';
-import {ModalSectionComponent} from './components/modal-section';
-import {PaginationSectionComponent} from './components/pagination-section';
-import {ProgressbarSectionComponent} from './components/progressbar-section';
-import {RatingSectionComponent} from './components/rating-section';
-import {TabsSectionComponent} from './components/tabs-section';
-import {TimepickerSectionComponent} from './components/timepicker-section';
-import {TooltipSectionComponent} from './components/tooltip-section';
-import {TypeaheadSectionComponent} from './components/typeahead-section';
-import {DemoHeaderComponent} from './components/demo-header';
-
-import {config} from './config';
+import {routes} from './config';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {APP_BASE_HREF, HashLocationStrategy, LocationStrategy} from '@angular/common';
 
 // todo: enable prod mod only for prod build
 // if (false) {
@@ -38,11 +24,8 @@ let tmp = require('./demo.template.html');
   selector: 'app',
   template: tmp,
   directives: [RouterOutlet, TopMenuComponent, MainMenuComponent]
-
-@RouteConfig(config.routes)
-
-    <modal-section></modal-section>
-    TypeaheadSectionComponent
+})
+@RouteConfig(routes)
 export class DemoComponent {
   public isBs3:boolean = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3;
   private viewContainerRef:ViewContainerRef;
@@ -53,5 +36,7 @@ export class DemoComponent {
   }
 }
 
-bootstrap(Demo, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]);
+bootstrap(DemoComponent, [ROUTER_PROVIDERS,
+  {provide: APP_BASE_HREF, useValue: '/'},
+  {provide: LocationStrategy, useClass: HashLocationStrategy}]);
 
diff --git a/package.json b/package.json
index 01ebd6e974..e5bcfa0abf 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@angular/core": "^2.0.0-rc.1",
     "@angular/platform-browser": "^2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
+    "@angular/router-deprecated": "2.0.0-rc.1",
     "async": "1.5.2",
     "bootstrap": "3.3.6",
     "codecov": "1.0.1",
diff --git a/webpack.config.js b/webpack.config.js
index d6cb6594d5..5d6c8d0e63 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -52,10 +52,9 @@ const config = {
       'es6-promise',
       'zone.js',
       'reflect-metadata',
-      '@angular/common',
-      '@angular/core'
+      // '@angular/common',
+      // '@angular/core'
     ],
-    'angular2-bootstrap': ['ng2-bootstrap'],
     'angular2-bootstrap-demo': 'demo'
   },