From 248efc36575272477cfb8d6456c2f051b4da1694 Mon Sep 17 00:00:00 2001
From: Dmitriy Shekhovtsov <valorkin@gmail.com>
Date: Wed, 21 Dec 2016 17:19:15 +0200
Subject: [PATCH] chore(demo): demos splitted

---
 .../accordion/accordion-section.component.ts  |  9 ++--
 .../app/components/accordion/demos/index.ts   |  4 +-
 demo/src/app/components/accordion/index.ts    |  2 -
 .../alerts/alerts-section.component.ts        |  2 +-
 .../buttons/buttons-section.component.ts      | 11 ++---
 .../src/app/components/buttons/demos/index.ts | 12 ++++++
 demo/src/app/components/buttons/index.ts      |  4 +-
 .../carousel/carousel-section.component.ts    | 11 ++---
 .../app/components/carousel/demos/index.ts    | 12 ++++++
 demo/src/app/components/carousel/index.ts     |  6 +--
 .../collapse/collapse-section.component.ts    | 12 ++----
 .../app/components/collapse/demos/index.ts    | 12 ++++++
 demo/src/app/components/collapse/index.ts     |  6 +--
 .../datepicker-section.component.ts           | 12 ++----
 .../app/components/datepicker/demos/index.ts  | 12 ++++++
 demo/src/app/components/datepicker/index.ts   |  6 +--
 .../app/components/dropdown/demos/index.ts    | 12 ++++++
 .../dropdown/dropdown-section.component.ts    | 11 ++---
 demo/src/app/components/dropdown/index.ts     |  6 +--
 demo/src/app/components/modal/demos/index.ts  | 12 ++++++
 demo/src/app/components/modal/index.ts        |  8 ++--
 .../modal/modal-section.component.ts          |  9 ++--
 .../app/components/pagination/demos/index.ts  | 12 ++++++
 demo/src/app/components/pagination/index.ts   |  7 ++--
 .../pagination-section.component.ts           | 11 ++---
 .../app/components/progressbar/demos/index.ts | 16 ++++++++
 demo/src/app/components/progressbar/index.ts  |  6 +--
 .../progressbar-section.component.ts          | 24 +++++------
 demo/src/app/components/rating/demos/index.ts | 12 ++++++
 demo/src/app/components/rating/index.ts       |  6 +--
 .../rating/rating-section.component.ts        | 12 ++----
 demo/src/app/components/tabs/demos/index.ts   | 12 ++++++
 demo/src/app/components/tabs/index.ts         |  6 +--
 .../components/tabs/tabs-section.component.ts | 12 ++----
 .../app/components/timepicker/demos/index.ts  | 12 ++++++
 demo/src/app/components/timepicker/index.ts   |  6 +--
 .../timepicker-section.component.ts           | 12 ++----
 .../src/app/components/tooltip/demos/index.ts | 12 ++++++
 demo/src/app/components/tooltip/index.ts      |  6 +--
 .../tooltip/tooltip-section.component.ts      | 12 ++----
 .../app/components/typeahead/demos/index.ts   | 12 ++++++
 demo/src/app/components/typeahead/index.ts    |  6 +--
 .../typeahead/typeahead-section.component.ts  | 12 ++----
 package.json                                  | 41 ++++++++++---------
 44 files changed, 285 insertions(+), 173 deletions(-)
 create mode 100644 demo/src/app/components/buttons/demos/index.ts
 create mode 100644 demo/src/app/components/carousel/demos/index.ts
 create mode 100644 demo/src/app/components/collapse/demos/index.ts
 create mode 100644 demo/src/app/components/datepicker/demos/index.ts
 create mode 100644 demo/src/app/components/dropdown/demos/index.ts
 create mode 100644 demo/src/app/components/modal/demos/index.ts
 create mode 100644 demo/src/app/components/pagination/demos/index.ts
 create mode 100644 demo/src/app/components/progressbar/demos/index.ts
 create mode 100644 demo/src/app/components/rating/demos/index.ts
 create mode 100644 demo/src/app/components/tabs/demos/index.ts
 create mode 100644 demo/src/app/components/timepicker/demos/index.ts
 create mode 100644 demo/src/app/components/tooltip/demos/index.ts
 create mode 100644 demo/src/app/components/typeahead/demos/index.ts

diff --git a/demo/src/app/components/accordion/accordion-section.component.ts b/demo/src/app/components/accordion/accordion-section.component.ts
index 5f0ceafb90..a37a1df82a 100644
--- a/demo/src/app/components/accordion/accordion-section.component.ts
+++ b/demo/src/app/components/accordion/accordion-section.component.ts
@@ -2,13 +2,11 @@
 // todo: add more samples http://getbootstrap.com/components/#panels-alternatives
 
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/usage.md');
 
-let ts = require('!!raw!./demos/accordion-demo.component.ts');
-let html = require('!!raw!./demos/accordion-demo.component.html');
-
 @Component({
   selector: 'accordion-section',
   template: `
@@ -41,7 +39,7 @@ let html = require('!!raw!./demos/accordion-demo.component.html');
   <!-- basic -->
   <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
   
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <accordion-demo></accordion-demo>
   </ng-sample-box>
       
@@ -53,7 +51,6 @@ let html = require('!!raw!./demos/accordion-demo.component.html');
 export class AccordionSectionComponent {
   public name: string = 'Accordion';
   public src: string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/accordion';
-  public html: string = html;
-  public ts: string = ts;
   public titleDoc: string = titleDoc;
+  public demos: any = DEMOS;
 }
diff --git a/demo/src/app/components/accordion/demos/index.ts b/demo/src/app/components/accordion/demos/index.ts
index 4409e9a927..cdd3d2d54f 100644
--- a/demo/src/app/components/accordion/demos/index.ts
+++ b/demo/src/app/components/accordion/demos/index.ts
@@ -1,5 +1,7 @@
-export const DEMO_COMPONENTS = [
+import { AccordionDemoComponent } from './accordion-demo.component';
 
+export const DEMO_COMPONENTS = [
+  AccordionDemoComponent
 ];
 
 export const DEMOS = {
diff --git a/demo/src/app/components/accordion/index.ts b/demo/src/app/components/accordion/index.ts
index 586a74f758..3495f00f23 100644
--- a/demo/src/app/components/accordion/index.ts
+++ b/demo/src/app/components/accordion/index.ts
@@ -5,13 +5,11 @@ import { AccordionModule } from 'ng2-bootstrap';
 
 import { SharedModule } from '../../shared';
 import { AccordionSectionComponent } from './accordion-section.component';
-import { AccordionDemoComponent } from './demos/accordion-demo.component';
 import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
     AccordionSectionComponent,
-    AccordionDemoComponent,
     ...DEMO_COMPONENTS
   ],
   imports: [
diff --git a/demo/src/app/components/alerts/alerts-section.component.ts b/demo/src/app/components/alerts/alerts-section.component.ts
index 0b408533bd..da9e06016f 100644
--- a/demo/src/app/components/alerts/alerts-section.component.ts
+++ b/demo/src/app/components/alerts/alerts-section.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DEMOS } from './demos/index';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/usage.md');
diff --git a/demo/src/app/components/buttons/buttons-section.component.ts b/demo/src/app/components/buttons/buttons-section.component.ts
index 4ff4cbec2d..23bdbd1de1 100644
--- a/demo/src/app/components/buttons/buttons-section.component.ts
+++ b/demo/src/app/components/buttons/buttons-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/buttons-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
-
 @Component({
   selector: 'buttons-section',
   template: `
@@ -35,7 +33,7 @@ let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
     <!-- basic -->
   <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
     
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <buttons-demo></buttons-demo>
   </ng-sample-box>
       
@@ -46,8 +44,7 @@ let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/buttons';
   public titleDoc:string = titleDoc;
+  public demos: any = DEMOS;
 }
diff --git a/demo/src/app/components/buttons/demos/index.ts b/demo/src/app/components/buttons/demos/index.ts
new file mode 100644
index 0000000000..06bb802469
--- /dev/null
+++ b/demo/src/app/components/buttons/demos/index.ts
@@ -0,0 +1,12 @@
+import { ButtonsDemoComponent } from './buttons-demo.component';
+
+export const DEMO_COMPONENTS = [
+  ButtonsDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./buttons-demo.component'),
+    html: require('!!raw?lang=markup!./buttons-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/buttons/index.ts b/demo/src/app/components/buttons/index.ts
index d99df4ad26..4c1b70843a 100644
--- a/demo/src/app/components/buttons/index.ts
+++ b/demo/src/app/components/buttons/index.ts
@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { ButtonsSectionComponent } from './buttons-section.component';
-import { ButtonsDemoComponent } from './demos/buttons-demo.component';
 import { ButtonsModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
     ButtonsSectionComponent,
-    ButtonsDemoComponent
+    ...DEMO_COMPONENTS
   ],
   imports: [
     ButtonsModule.forRoot(),
diff --git a/demo/src/app/components/carousel/carousel-section.component.ts b/demo/src/app/components/carousel/carousel-section.component.ts
index b74dd981f8..d1fecfd190 100644
--- a/demo/src/app/components/carousel/carousel-section.component.ts
+++ b/demo/src/app/components/carousel/carousel-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/carousel-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
-
 @Component({
   selector: 'carousel-section',
   template: `
@@ -35,7 +33,7 @@ let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
   <h2 id="examples">Examples</h2>
    
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <carousel-demo></carousel-demo>
   </ng-sample-box>
   
@@ -47,8 +45,7 @@ let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
 })
 export class CarouselSectionComponent {
   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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/carousel';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/carousel/demos/index.ts b/demo/src/app/components/carousel/demos/index.ts
new file mode 100644
index 0000000000..137003d609
--- /dev/null
+++ b/demo/src/app/components/carousel/demos/index.ts
@@ -0,0 +1,12 @@
+import { CarouselDemoComponent } from './carousel-demo.component';
+
+export const DEMO_COMPONENTS = [
+  CarouselDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./carousel-demo.component'),
+    html: require('!!raw?lang=markup!./carousel-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/carousel/index.ts b/demo/src/app/components/carousel/index.ts
index 8742765813..4469aaf50e 100644
--- a/demo/src/app/components/carousel/index.ts
+++ b/demo/src/app/components/carousel/index.ts
@@ -3,14 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 
-import { CarouselDemoComponent } from './demos/carousel-demo.component';
 import { CarouselSectionComponent } from './carousel-section.component';
 import { CarouselModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations:[
-    CarouselDemoComponent,
-    CarouselSectionComponent
+    CarouselSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports:[
     CarouselModule.forRoot(),
diff --git a/demo/src/app/components/collapse/collapse-section.component.ts b/demo/src/app/components/collapse/collapse-section.component.ts
index 70545cfa73..0fb638dcad 100644
--- a/demo/src/app/components/collapse/collapse-section.component.ts
+++ b/demo/src/app/components/collapse/collapse-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/collapse-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/collapse-demo.component.html');
-
 @Component({
   selector: 'collapse-section',
   template: `
@@ -34,19 +32,17 @@ let html = require('!!raw?lang=markup!./demos/collapse-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <collapse-demo></collapse-demo>
   </ng-sample-box>
       
   <h2 id="api-reference">API Reference</h2>
   <ng-api-doc id="collapse-directive" directive="CollapseDirective"></ng-api-doc>
-  
 </demo-section>`
 })
 export class CollapseSectionComponent {
   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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/collapse';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/collapse/demos/index.ts b/demo/src/app/components/collapse/demos/index.ts
new file mode 100644
index 0000000000..0a5e62abe0
--- /dev/null
+++ b/demo/src/app/components/collapse/demos/index.ts
@@ -0,0 +1,12 @@
+import { CollapseDemoComponent } from './collapse-demo.component';
+
+export const DEMO_COMPONENTS = [
+  CollapseDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./collapse-demo.component'),
+    html: require('!!raw?lang=markup!./collapse-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/collapse/index.ts b/demo/src/app/components/collapse/index.ts
index 659ab16c11..0e4187a59b 100644
--- a/demo/src/app/components/collapse/index.ts
+++ b/demo/src/app/components/collapse/index.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { CollapseDemoComponent } from './demos/collapse-demo.component';
 import { CollapseSectionComponent } from './collapse-section.component';
 import { CollapseModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    CollapseDemoComponent,
-    CollapseSectionComponent
+    CollapseSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CollapseModule.forRoot(),
diff --git a/demo/src/app/components/datepicker/datepicker-section.component.ts b/demo/src/app/components/datepicker/datepicker-section.component.ts
index 0467b0abe0..0d51e9e566 100644
--- a/demo/src/app/components/datepicker/datepicker-section.component.ts
+++ b/demo/src/app/components/datepicker/datepicker-section.component.ts
@@ -1,12 +1,9 @@
 // https://api.jqueryui.com/datepicker/
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/datepicker-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/datepicker-demo.component.html');
-
 @Component({
   selector: 'datepicker-section',
   template: `
@@ -34,7 +31,7 @@ let html = require('!!raw?lang=markup!./demos/datepicker-demo.component.html');
 
   <h2 id="examples">Examples</h2>
 
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <datepicker-demo></datepicker-demo>
   </ng-sample-box>
   
@@ -44,8 +41,7 @@ let html = require('!!raw?lang=markup!./demos/datepicker-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/datepicker';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/datepicker/demos/index.ts b/demo/src/app/components/datepicker/demos/index.ts
new file mode 100644
index 0000000000..b1fd614744
--- /dev/null
+++ b/demo/src/app/components/datepicker/demos/index.ts
@@ -0,0 +1,12 @@
+import { DatepickerDemoComponent } from './datepicker-demo.component';
+
+export const DEMO_COMPONENTS = [
+  DatepickerDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./datepicker-demo.component.html'),
+    html: require('!!raw?lang=markup!./datepicker-demo.component')
+  }
+};
diff --git a/demo/src/app/components/datepicker/index.ts b/demo/src/app/components/datepicker/index.ts
index cf92a0bc6e..0e579fbae8 100644
--- a/demo/src/app/components/datepicker/index.ts
+++ b/demo/src/app/components/datepicker/index.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { DatepickerDemoComponent } from './demos/datepicker-demo.component';
 import { DatepickerSectionComponent } from './datepicker-section.component';
 import { DatepickerModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations:[
-    DatepickerDemoComponent,
-    DatepickerSectionComponent
+    DatepickerSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports:[
     DatepickerModule.forRoot(),
diff --git a/demo/src/app/components/dropdown/demos/index.ts b/demo/src/app/components/dropdown/demos/index.ts
new file mode 100644
index 0000000000..e9f33e37f7
--- /dev/null
+++ b/demo/src/app/components/dropdown/demos/index.ts
@@ -0,0 +1,12 @@
+import { DropdownDemoComponent } from './dropdown-demo.component';
+
+export const DEMO_COMPONENTS = [
+  DropdownDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./dropdown-demo.component'),
+    html: require('!!raw?lang=markup!./dropdown-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/dropdown/dropdown-section.component.ts b/demo/src/app/components/dropdown/dropdown-section.component.ts
index 8d3b28612a..c5c4352941 100644
--- a/demo/src/app/components/dropdown/dropdown-section.component.ts
+++ b/demo/src/app/components/dropdown/dropdown-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/dropdown-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/dropdown-demo.component.html');
-
 @Component({
   selector: 'dropdown-section',
   template: `
@@ -36,7 +34,7 @@ let html = require('!!raw?lang=markup!./demos/dropdown-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <dropdown-demo></dropdown-demo>
   </ng-sample-box>
       
@@ -48,8 +46,7 @@ let html = require('!!raw?lang=markup!./demos/dropdown-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/dropdown';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/dropdown/index.ts b/demo/src/app/components/dropdown/index.ts
index 4c067abe61..67748ca54e 100644
--- a/demo/src/app/components/dropdown/index.ts
+++ b/demo/src/app/components/dropdown/index.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { DropdownDemoComponent } from './demos/dropdown-demo.component';
 import { DropdownSectionComponent } from './dropdown-section.component';
 import { DropdownModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    DropdownDemoComponent,
-    DropdownSectionComponent
+    DropdownSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     DropdownModule.forRoot(),
diff --git a/demo/src/app/components/modal/demos/index.ts b/demo/src/app/components/modal/demos/index.ts
new file mode 100644
index 0000000000..bb123502ab
--- /dev/null
+++ b/demo/src/app/components/modal/demos/index.ts
@@ -0,0 +1,12 @@
+import { ModalDemoComponent } from './modal-demo.component';
+
+export const DEMO_COMPONENTS = [
+  ModalDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./modal-demo.component'),
+    html: require('!!raw?lang=markup!./modal-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/modal/index.ts b/demo/src/app/components/modal/index.ts
index 01ddc9026c..deae2e0a8e 100644
--- a/demo/src/app/components/modal/index.ts
+++ b/demo/src/app/components/modal/index.ts
@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { ModalModule } from 'ng2-bootstrap';
-import { ModalDemoComponent } from './demos/modal-demo.component';
 import { ModalSectionComponent } from './modal-section.component';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    ModalDemoComponent,
-    ModalSectionComponent
+    ModalSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     ModalModule.forRoot(),
@@ -17,7 +17,7 @@ import { ModalSectionComponent } from './modal-section.component';
     FormsModule,
     SharedModule
   ],
-  exports: [ModalDemoComponent]
+  exports: [ModalSectionComponent]
 })
 export class DemoModalModule {
 
diff --git a/demo/src/app/components/modal/modal-section.component.ts b/demo/src/app/components/modal/modal-section.component.ts
index bf33ef631f..2ac21ba07d 100644
--- a/demo/src/app/components/modal/modal-section.component.ts
+++ b/demo/src/app/components/modal/modal-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/modal-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/modal-demo.component.html');
-
 @Component({
   selector: 'modal-section',
   template: `
@@ -36,7 +34,7 @@ let html = require('!!raw?lang=markup!./demos/modal-demo.component.html');
   <h2 id="examples">Examples</h2>
   
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <modal-demo></modal-demo>
   </ng-sample-box>
       
@@ -49,8 +47,7 @@ let html = require('!!raw?lang=markup!./demos/modal-demo.component.html');
 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 demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 
 }
diff --git a/demo/src/app/components/pagination/demos/index.ts b/demo/src/app/components/pagination/demos/index.ts
new file mode 100644
index 0000000000..e58210994d
--- /dev/null
+++ b/demo/src/app/components/pagination/demos/index.ts
@@ -0,0 +1,12 @@
+import { PaginationDemoComponent } from './pagination-demo.component';
+
+export const DEMO_COMPONENTS = [
+  PaginationDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./pagination-demo.component'),
+    html: require('!!raw?lang=markup!./pagination-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/pagination/index.ts b/demo/src/app/components/pagination/index.ts
index c370aa7a85..a898350deb 100644
--- a/demo/src/app/components/pagination/index.ts
+++ b/demo/src/app/components/pagination/index.ts
@@ -2,14 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { PaginationDemoComponent } from './demos/pagination-demo.component';
 import { PaginationSectionComponent } from './pagination-section.component';
 import { PaginationModule } from 'ng2-bootstrap';
 
+import { DEMO_COMPONENTS } from './demos';
+
 @NgModule({
   declarations: [
-    PaginationDemoComponent,
-    PaginationSectionComponent
+    PaginationSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     PaginationModule.forRoot(),
diff --git a/demo/src/app/components/pagination/pagination-section.component.ts b/demo/src/app/components/pagination/pagination-section.component.ts
index 785d2bdaff..fd30fcb957 100644
--- a/demo/src/app/components/pagination/pagination-section.component.ts
+++ b/demo/src/app/components/pagination/pagination-section.component.ts
@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/pagination-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/pagination-demo.component.html');
-
 @Component({
   selector: 'pagination-section',
   template: `
@@ -37,7 +35,7 @@ let html = require('!!raw?lang=markup!./demos/pagination-demo.component.html');
   <h2 id="examples">Examples</h2>
   
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <pagination-demo></pagination-demo>
   </ng-sample-box>
       
@@ -49,8 +47,7 @@ let html = require('!!raw?lang=markup!./demos/pagination-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/pagination';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/progressbar/demos/index.ts b/demo/src/app/components/progressbar/demos/index.ts
new file mode 100644
index 0000000000..a3b7d4f6c7
--- /dev/null
+++ b/demo/src/app/components/progressbar/demos/index.ts
@@ -0,0 +1,16 @@
+import { ProgressbarDemoComponent } from './progressbar-demo.component';
+
+export const DEMO_COMPONENTS = [
+  ProgressbarDemoComponent
+];
+
+export const DEMOS = {
+  bs3old: {
+    component: require('!!raw?lang=typescript!./progressbar-demo.component'),
+    html: require('!!raw?lang=markup!./progressbar-demo-bs3.component.html')
+  },
+  bs4old: {
+    component: require('!!raw?lang=typescript!./progressbar-demo.component'),
+    html: require('!!raw?lang=markup!./progressbar-demo-bs4.component.html')
+  }
+};
diff --git a/demo/src/app/components/progressbar/index.ts b/demo/src/app/components/progressbar/index.ts
index 8b70a749ae..28f552e49f 100644
--- a/demo/src/app/components/progressbar/index.ts
+++ b/demo/src/app/components/progressbar/index.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { ProgressbarDemoComponent } from './demos/progressbar-demo.component';
 import { ProgressbarSectionComponent } from './progressbar-section.component';
 import { ProgressbarModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    ProgressbarDemoComponent,
-    ProgressbarSectionComponent
+    ProgressbarSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CommonModule,
diff --git a/demo/src/app/components/progressbar/progressbar-section.component.ts b/demo/src/app/components/progressbar/progressbar-section.component.ts
index 54ded24cd4..65970a2b09 100644
--- a/demo/src/app/components/progressbar/progressbar-section.component.ts
+++ b/demo/src/app/components/progressbar/progressbar-section.component.ts
@@ -1,16 +1,10 @@
 import { Component } from '@angular/core';
 import { isBs3 } from 'ng2-bootstrap';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/progressbar-demo.component.ts');
-
-let templates: any = {
-  'bs3': require('!!raw?lang=markup!./demos/progressbar-demo-bs3.component.html'),
-  'bs4': require('!!raw?lang=markup!./demos/progressbar-demo-bs4.component.html')
-};
-
 @Component({
   selector: 'progressbar-section',
   template: `
@@ -42,7 +36,11 @@ let templates: any = {
   <h2 id="examples">Examples</h2>
   
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box *ngIf="isBs3" [ts]="demos.bs3old.component" [html]="demos.bs3old.html">
+    <progressbar-demo></progressbar-demo>
+  </ng-sample-box>
+  
+  <ng-sample-box *ngIf="!isBs3" [ts]="demos.bs4old.component" [html]="demos.bs4old.html">
     <progressbar-demo></progressbar-demo>
   </ng-sample-box>
       
@@ -55,12 +53,10 @@ let templates: any = {
 })
 export class ProgressbarSectionComponent {
   public name: string = 'Progressbar';
-  public src: string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar';
-
-  public get html(): string {
-    return isBs3() ? templates.bs3 : templates.bs4;
+  public src: string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/progressbar';
+  public get isBs3():boolean {
+    return isBs3();
   }
-
-  public ts: string = ts;
+  public demos: any = DEMOS;
   public titleDoc: string = titleDoc;
 }
diff --git a/demo/src/app/components/rating/demos/index.ts b/demo/src/app/components/rating/demos/index.ts
new file mode 100644
index 0000000000..e212680e24
--- /dev/null
+++ b/demo/src/app/components/rating/demos/index.ts
@@ -0,0 +1,12 @@
+import { RatingDemoComponent } from './rating-demo.component';
+
+export const DEMO_COMPONENTS = [
+  RatingDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./rating-demo.component'),
+    html: require('!!raw?lang=markup!./rating-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/rating/index.ts b/demo/src/app/components/rating/index.ts
index 62b7786b4b..93862c3fa7 100644
--- a/demo/src/app/components/rating/index.ts
+++ b/demo/src/app/components/rating/index.ts
@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { RatingSectionComponent } from './rating-section.component';
-import { RatingDemoComponent } from './demos/rating-demo.component';
 import { RatingModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    RatingDemoComponent,
-    RatingSectionComponent
+    RatingSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CommonModule,
diff --git a/demo/src/app/components/rating/rating-section.component.ts b/demo/src/app/components/rating/rating-section.component.ts
index dfbcb3afc5..f4d81a80cd 100644
--- a/demo/src/app/components/rating/rating-section.component.ts
+++ b/demo/src/app/components/rating/rating-section.component.ts
@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/rating-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/rating-demo.component.html');
-
 @Component({
   selector: 'rating-section',
   template: `
@@ -35,7 +32,7 @@ let html = require('!!raw?lang=markup!./demos/rating-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <rating-demo></rating-demo>
   </ng-sample-box>
       
@@ -45,8 +42,7 @@ let html = require('!!raw?lang=markup!./demos/rating-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/rating';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/tabs/demos/index.ts b/demo/src/app/components/tabs/demos/index.ts
new file mode 100644
index 0000000000..dc02a7d806
--- /dev/null
+++ b/demo/src/app/components/tabs/demos/index.ts
@@ -0,0 +1,12 @@
+import { TabsDemoComponent } from './tabs-demo.component';
+
+export const DEMO_COMPONENTS = [
+  TabsDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./tabs-demo.component'),
+    html: require('!!raw?lang=markup!./tabs-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/tabs/index.ts b/demo/src/app/components/tabs/index.ts
index 97c315a1f4..3826438e66 100644
--- a/demo/src/app/components/tabs/index.ts
+++ b/demo/src/app/components/tabs/index.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { TabsDemoComponent } from './demos/tabs-demo.component';
 import { TabsSectionComponent } from './tabs-section.component';
 import { TabsModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    TabsDemoComponent,
-    TabsSectionComponent
+    TabsSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CommonModule,
diff --git a/demo/src/app/components/tabs/tabs-section.component.ts b/demo/src/app/components/tabs/tabs-section.component.ts
index b2e4b40d1f..5a98a56a02 100644
--- a/demo/src/app/components/tabs/tabs-section.component.ts
+++ b/demo/src/app/components/tabs/tabs-section.component.ts
@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/tabs-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/tabs-demo.component.html');
-
 @Component({
   selector: 'tabs-section',
   template: `
@@ -37,7 +34,7 @@ let html = require('!!raw?lang=markup!./demos/tabs-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
       <tabs-demo></tabs-demo>
   </ng-sample-box>
       
@@ -51,8 +48,7 @@ let html = require('!!raw?lang=markup!./demos/tabs-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/tabs';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/timepicker/demos/index.ts b/demo/src/app/components/timepicker/demos/index.ts
new file mode 100644
index 0000000000..c861b8843b
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/index.ts
@@ -0,0 +1,12 @@
+import { TimepickerDemoComponent } from './timepicker-demo.component';
+
+export const DEMO_COMPONENTS = [
+  TimepickerDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./timepicker-demo.component'),
+    html: require('!!raw?lang=markup!./timepicker-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/timepicker/index.ts b/demo/src/app/components/timepicker/index.ts
index 6e0d00bc35..b831ce66e4 100644
--- a/demo/src/app/components/timepicker/index.ts
+++ b/demo/src/app/components/timepicker/index.ts
@@ -4,12 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { TimepickerModule } from 'ng2-bootstrap';
 import { TimepickerSectionComponent } from './timepicker-section.component';
-import { TimepickerDemoComponent } from './demos/timepicker-demo.component';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    TimepickerDemoComponent,
-    TimepickerSectionComponent
+    TimepickerSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CommonModule,
diff --git a/demo/src/app/components/timepicker/timepicker-section.component.ts b/demo/src/app/components/timepicker/timepicker-section.component.ts
index 65df978a1d..e9e38b2da0 100644
--- a/demo/src/app/components/timepicker/timepicker-section.component.ts
+++ b/demo/src/app/components/timepicker/timepicker-section.component.ts
@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/timepicker-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/timepicker-demo.component.html');
-
 @Component({
   selector: 'timepicker-section',
   template: `
@@ -35,7 +32,7 @@ let html = require('!!raw?lang=markup!./demos/timepicker-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <timepicker-demo></timepicker-demo>
   </ng-sample-box>
       
@@ -47,8 +44,7 @@ let html = require('!!raw?lang=markup!./demos/timepicker-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/timepicker';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/tooltip/demos/index.ts b/demo/src/app/components/tooltip/demos/index.ts
new file mode 100644
index 0000000000..6a5c375e7d
--- /dev/null
+++ b/demo/src/app/components/tooltip/demos/index.ts
@@ -0,0 +1,12 @@
+import { TooltipDemoComponent } from './tooltip-demo.component';
+
+export const DEMO_COMPONENTS = [
+  TooltipDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./tooltip-demo.component'),
+    html: require('!!raw?lang=markup!./tooltip-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/tooltip/index.ts b/demo/src/app/components/tooltip/index.ts
index f52074a19f..a832122c93 100644
--- a/demo/src/app/components/tooltip/index.ts
+++ b/demo/src/app/components/tooltip/index.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { TooltipDemoComponent } from './demos/tooltip-demo.component';
 import { TooltipSectionComponent } from './tooltip-section.component';
 import { TooltipModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos/index';
 
 @NgModule({
   declarations: [
-    TooltipDemoComponent,
-    TooltipSectionComponent
+    TooltipSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CommonModule,
diff --git a/demo/src/app/components/tooltip/tooltip-section.component.ts b/demo/src/app/components/tooltip/tooltip-section.component.ts
index 56fdb07c3f..d665c89802 100644
--- a/demo/src/app/components/tooltip/tooltip-section.component.ts
+++ b/demo/src/app/components/tooltip/tooltip-section.component.ts
@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/tooltip-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/tooltip-demo.component.html');
-
 @Component({
   selector: 'tooltip-section',
   template: `
@@ -35,7 +32,7 @@ let html = require('!!raw?lang=markup!./demos/tooltip-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <tooltip-demo></tooltip-demo>
   </ng-sample-box>
       
@@ -47,8 +44,7 @@ let html = require('!!raw?lang=markup!./demos/tooltip-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/tooltip';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/demo/src/app/components/typeahead/demos/index.ts b/demo/src/app/components/typeahead/demos/index.ts
new file mode 100644
index 0000000000..5bfbc7196c
--- /dev/null
+++ b/demo/src/app/components/typeahead/demos/index.ts
@@ -0,0 +1,12 @@
+import { TypeaheadDemoComponent } from './typeahead-demo.component';
+
+export const DEMO_COMPONENTS = [
+  TypeaheadDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./typeahead-demo.component'),
+    html: require('!!raw?lang=markup!./typeahead-demo.component.html')
+  }
+};
diff --git a/demo/src/app/components/typeahead/index.ts b/demo/src/app/components/typeahead/index.ts
index 5861a6f681..9c8e8aee6a 100644
--- a/demo/src/app/components/typeahead/index.ts
+++ b/demo/src/app/components/typeahead/index.ts
@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { TypeaheadModule } from 'ng2-bootstrap';
-import { TypeaheadDemoComponent } from './demos/typeahead-demo.component';
 import { TypeaheadSectionComponent } from './typeahead-section.component';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    TypeaheadDemoComponent,
-    TypeaheadSectionComponent
+    TypeaheadSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CommonModule,
diff --git a/demo/src/app/components/typeahead/typeahead-section.component.ts b/demo/src/app/components/typeahead/typeahead-section.component.ts
index c3340c3d69..224d935d4d 100644
--- a/demo/src/app/components/typeahead/typeahead-section.component.ts
+++ b/demo/src/app/components/typeahead/typeahead-section.component.ts
@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/typeahead-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/typeahead-demo.component.html');
-
 @Component({
   selector: 'typeahead-section',
   template: `
@@ -33,7 +30,7 @@ let html = require('!!raw?lang=markup!./demos/typeahead-demo.component.html');
       
   <!-- basic -->
   
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <typeahead-demo></typeahead-demo>
   </ng-sample-box>
       
@@ -43,8 +40,7 @@ let html = require('!!raw?lang=markup!./demos/typeahead-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/typeahead';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }
diff --git a/package.json b/package.json
index 1109441e5b..03d32b870e 100644
--- a/package.json
+++ b/package.json
@@ -51,40 +51,28 @@
     "moment": "2.17.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.42",
-    "angular-cli": "1.0.0-beta.24",
-    "codelyzer": "~2.0.0-beta.1",
-    "jasmine-core": "2.5.2",
-    "jasmine-spec-reporter": "2.5.0",
-    "karma": "1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-remap-istanbul": "^0.2.1",
-    "protractor": "~4.0.13",
-    "ts-node": "1.2.1",
-    "tslint": "^4.0.2",
     "@angular/common": "^2.4.0",
     "@angular/compiler": "^2.4.0",
+    "@angular/compiler-cli": "^2.4.0",
     "@angular/core": "^2.4.0",
     "@angular/forms": "^2.4.0",
     "@angular/http": "^2.4.0",
     "@angular/platform-browser": "^2.4.0",
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
+    "@ngtools/webpack": "1.2.1",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
     "@types/webpack": "2.0.0",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.0.1",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.2",
+    "angular-cli": "1.0.0-beta.24",
     "bootstrap": "3.3.7",
     "chokidar-cli": "1.2.0",
     "classlist-polyfill": "1.0.3",
     "codecov": "1.0.1",
+    "codelyzer": "~2.0.0-beta.4",
     "conventional-changelog-cli": "1.2.0",
     "conventional-github-releaser": "1.1.3",
+    "core-js": "^2.4.1",
     "cpy": "5.0.0",
     "cpy-cli": "1.0.1",
     "del-cli": "0.2.1",
@@ -93,7 +81,14 @@
     "google-code-prettify": "1.0.5",
     "html-loader": "0.4.4",
     "jasmine": "2.5.2",
+    "jasmine-core": "2.5.2",
     "jasmine-data-provider": "2.2.0",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
     "karma-sauce-launcher": "1.1.0",
     "lite-server": "2.2.2",
     "lodash": "4.17.2",
@@ -103,13 +98,19 @@
     "ngm-cli": "^0.3.7",
     "npm-run-all": "3.1.2",
     "pre-commit": "1.2.1",
+    "protractor": "~4.0.13",
     "reflect-metadata": "0.1.8",
     "require-dir": "0.3.1",
+    "rxjs": "^5.0.1",
     "systemjs-builder": "0.15.34",
+    "ts-helpers": "^1.1.1",
+    "ts-node": "1.2.1",
+    "tslint": "^4.0.2",
     "tslint-config-valorsoft": "1.2.0",
     "typedoc": "0.5.1",
     "typescript": "2.0.10",
     "wallaby-webpack": "0.0.26",
-    "webdriver-manager": "11.0.0"
+    "webdriver-manager": "11.0.0",
+    "zone.js": "^0.7.4"
   }
 }