chore(): begin adding ionic components to mono-repo.

packages/ionic-angular/demos/src/action-sheet/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/action-sheet/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/action-sheet/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/action-sheet/pages/page-one/page-one.html

@@ -0,0 +1,14 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Action Sheet</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-button block (click)="present()">Basic Action Sheet</ion-button>
+
+</ion-content>

packages/ionic-angular/demos/src/action-sheet/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/action-sheet/pages/page-one/page-one.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { ActionSheetController, Platform } from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
+
+  present() {
+    let actionSheet = this.alertCtrl.create({
+      title: 'Albums',
+      buttons: [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          icon: !this.platform.is('ios') ? 'trash' : null,
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        },
+        {
+          text: 'Share',
+          icon: !this.platform.is('ios') ? 'share' : null,
+          handler: () => {
+            console.log('Share clicked');
+          }
+        },
+        {
+          text: 'Play',
+          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
+          handler: () => {
+            console.log('Play clicked');
+          }
+        },
+        {
+          text: 'Favorite',
+          icon: !this.platform.is('ios') ? 'heart-outline' : null,
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel', // will always sort to be on the bottom
+          icon: !this.platform.is('ios') ? 'close' : null,
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+}

packages/ionic-angular/demos/src/alert/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/alert/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/alert/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/alert/pages/page-one/page-one.html

@@ -0,0 +1,18 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Alert</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-button block (click)="doAlert()">Basic Alert</ion-button>
+  <ion-button color="light" block (click)="doConfirm()">Confirm Alert</ion-button>
+  <ion-button color="secondary" block (click)="doPrompt()">Prompt Alert</ion-button>
+  <ion-button color="danger" block (click)="doRadio()">Radio Alert</ion-button>
+  <ion-button color="dark" block (click)="doCheckbox()">Checkbox Alert</ion-button>
+
+</ion-content>

packages/ionic-angular/demos/src/alert/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/alert/pages/page-one/page-one.ts

@@ -0,0 +1,209 @@
+import { Component } from '@angular/core';
+import { AlertController } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  testRadioOpen = false;
+  testRadioResult: any;
+  testCheckboxOpen = false;
+  testCheckboxResult: any;
+
+  constructor(public alertCtrl: AlertController) {}
+
+  doAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'New Friend!',
+      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
+      buttons: ['Ok']
+    });
+
+    alert.present();
+  }
+
+  doConfirm() {
+    let alert = this.alertCtrl.create({
+      title: 'Use this lightsaber?',
+      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
+      buttons: [
+        {
+          text: 'Disagree',
+          handler: () => {
+            console.log('Disagree clicked');
+          }
+        },
+        {
+          text: 'Agree',
+          handler: () => {
+            console.log('Agree clicked');
+          }
+        }
+      ]
+    });
+
+    alert.present();
+  }
+
+  doPrompt() {
+    let alert = this.alertCtrl.create({
+      title: 'Login',
+      message: 'Enter a name for this new album you\'re so keen on adding',
+      inputs: [
+        {
+          name: 'title',
+          placeholder: 'Title'
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          handler: (data) => {
+            console.log('Cancel clicked');
+          }
+        },
+        {
+          text: 'Save',
+          handler: (data) => {
+            console.log('Saved clicked');
+          }
+        }
+      ]
+    });
+
+    alert.present();
+  }
+
+  doRadio() {
+    let alert = this.alertCtrl.create();
+    alert.setTitle('Lightsaber color');
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Blue',
+      value: 'blue',
+      checked: true
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Green',
+      value: 'green'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Red',
+      value: 'red'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Yellow',
+      value: 'yellow'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Purple',
+      value: 'purple'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'White',
+      value: 'white'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Black',
+      value: 'black'
+    });
+
+    alert.addButton('Cancel');
+    alert.addButton({
+      text: 'Ok',
+      handler: (data: any) => {
+        console.log('Radio data:', data);
+        this.testRadioOpen = false;
+        this.testRadioResult = data;
+      }
+    });
+
+    alert.present();
+  }
+
+  doCheckbox() {
+    let alert = this.alertCtrl.create();
+    alert.setTitle('Which planets have you visited?');
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Alderaan',
+        value: 'value1',
+        checked: true
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Bespin',
+        value: 'value2'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Coruscant',
+        value: 'value3'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Endor',
+        value: 'value4'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Hoth',
+        value: 'value5'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Jakku',
+        value: 'value6'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Naboo',
+        value: 'value6'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Takodana',
+        value: 'value6'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Tatooine',
+        value: 'value6'
+    });
+
+    alert.addButton('Cancel');
+    alert.addButton({
+      text: 'Okay',
+      handler: (data: any) => {
+          console.log('Checkbox data:', data);
+          this.testCheckboxOpen = false;
+          this.testCheckboxResult = data;
+      }
+    });
+
+    alert.present();
+  }
+
+}

packages/ionic-angular/demos/src/button/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/button/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/button/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/button/pages/page-one/page-one.html

@@ -0,0 +1,64 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Button</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center>
+
+  <h4>Colors</h4>
+
+  <ion-button>Default</ion-button>
+
+  <ion-button color="secondary">Secondary</ion-button>
+
+  <ion-button color="danger">Danger</ion-button>
+
+  <ion-button color="light">Light</ion-button>
+
+  <ion-button color="dark">Dark</ion-button>
+
+  <h4>Shapes</h4>
+
+  <ion-button full>Full Button</ion-button>
+
+  <ion-button block>Block Button</ion-button>
+
+  <ion-button round>Round Button</ion-button>
+
+  <h4>Outlines</h4>
+
+  <ion-button color="secondary" full outline>Outline + Full</ion-button>
+
+  <ion-button color="secondary" block outline>Outline + Block</ion-button>
+
+  <ion-button color="secondary" round outline>Outline + Round</ion-button>
+
+  <h4>Icons</h4>
+
+  <ion-button color="dark">
+    <ion-icon slot="start" name="star"></ion-icon>
+    Left Icon
+  </ion-button>
+
+  <ion-button color="dark">
+    Right Icon
+    <ion-icon slot="end" name="star"></ion-icon>
+  </ion-button>
+
+  <ion-button color="dark">
+    <ion-icon slot="icon-only" name="star"></ion-icon>
+  </ion-button>
+
+  <h4>Sizes</h4>
+
+  <ion-button color="light" large>Large</ion-button>
+
+  <ion-button color="light">Default</ion-button>
+
+  <ion-button color="light" small>Small</ion-button>
+
+</ion-content>

packages/ionic-angular/demos/src/button/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/button/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

packages/ionic-angular/demos/src/checkbox/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/checkbox/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/checkbox/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/checkbox/pages/page-one/page-one.html

@@ -0,0 +1,76 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Checkbox</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.jon"></ion-checkbox>
+      <ion-label>Jon Snow</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
+      <ion-label>Daenerys Targaryen</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.arya" disabled="true"></ion-checkbox>
+      <ion-label>Arya Stark</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
+      <ion-label>Tyrion Lannister</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
+      <ion-label>Sansa Stark</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.khal"></ion-checkbox>
+      <ion-label>Khal Drogo</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
+      <ion-label>Cersei Lannister</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.stannis"></ion-checkbox>
+      <ion-label>Stannis Baratheon</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.petyr" disabled="true"></ion-checkbox>
+      <ion-label>Petyr Baelish</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
+      <ion-label>Hodor</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
+      <ion-label>Catelyn Stark</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
+      <ion-label>Bronn</ion-label>
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>

packages/ionic-angular/demos/src/checkbox/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/checkbox/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+
+  data = {
+    jon: true,
+    daenerys: true,
+    arya: false,
+    tyroin: false,
+    sansa: true,
+    khal: false,
+    cersei: true,
+    stannis: true,
+    petyr: false,
+    hodor: true,
+    catelyn: true,
+    bronn: false
+  };
+}

packages/ionic-angular/demos/src/chip/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/chip/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/chip/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/chip/pages/page-one/page-one.html

@@ -0,0 +1,96 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Chips</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <h2>Text Chips</h2>
+
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Another With Longer Text</ion-label>
+  </ion-chip>
+
+  <h2>Color Chips</h2>
+
+  <ion-chip color="primary">
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Primary</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-chip>
+
+  <h2>Icon Chips</h2>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+   <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Secondary</ion-label>
+    <ion-icon name="pin" color="secondary"></ion-icon>
+  </ion-chip>
+
+  <h2>Avatar Chips</h2>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Right Avatar</ion-label>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/d249a09fecac4da036d26c5002af2c94?d=identicon&f=y">
+    </ion-avatar>
+  </ion-chip>
+
+  <h2>Delete Chips</h2>
+
+  <ion-chip #chip1>
+    <ion-label>Default</ion-label>
+    <ion-button clear (click)="delete(chip1)">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-button>
+  </ion-chip>
+
+  <ion-chip #chip2>
+    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-label>With Icon</ion-label>
+    <ion-button clear (click)="delete(chip2)">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-button>
+  </ion-chip>
+
+  <ion-chip #chip3>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/83b4748bf7e821165ecccd4c090d96e1?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>With Avatar</ion-label>
+    <ion-button clear color="dark" (click)="delete(chip3)">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-button>
+  </ion-chip>
+
+</ion-content>

packages/ionic-angular/demos/src/chip/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/chip/pages/page-one/page-one.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  delete(chip: Element) {
+    chip.remove();
+  }
+}

packages/ionic-angular/demos/src/config/app/app.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { Config, Platform } from '../../../../src';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  config: any;
+  root = PageOne;
+  constructor(public _config: Config, public platform: Platform) {
+
+    if (window.localStorage.getItem('configDemo') !== null) {
+      this.config = JSON.parse(window.localStorage.getItem('configDemo'));
+    } else if (platform.is('ios')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        'tabsPlacement': 'bottom'
+      };
+    } else if (platform.is('windows')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        'tabsPlacement': 'top'
+      };
+    } else {
+      this.config = {
+        'backButtonIcon': 'md-arrow-back',
+        'iconMode': 'md',
+        'tabsPlacement': 'bottom'
+      };
+    }
+
+    this._config.set('tabsPlacement', this.config.tabsPlacement);
+    this._config.set('iconMode', this.config.iconMode);
+    this._config.set('backButtonIcon', this.config.backButtonIcon);
+  }
+}

packages/ionic-angular/demos/src/config/app/app.module.ts

@@ -0,0 +1,93 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+import { PageTwoModule } from '../pages/page-two/page-two.module';
+import { PageThreeModule } from '../pages/page-three/page-three.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, CONFIG_DEMO),
+    PageOneModule,
+    PageTwoModule,
+    PageThreeModule
+  ],
+  bootstrap: [IonicApp],
+})
+export class AppModule {}
+
+if (!window.localStorage) {
+  Object.defineProperty(window, 'localStorage', new (function () {
+    var aKeys: any[] = [], oStorage = {};
+    Object.defineProperty(oStorage, 'getItem', {
+      value: function (sKey: number) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'key', {
+      value: function (nKeyId: number) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'setItem', {
+      value: function (sKey: string, sValue: string) {
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=' + encodeURI(sValue) + '; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=';
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'length', {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'removeItem', {
+      value: function (sKey: string) {
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=';
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx: number;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) {
+          (oStorage as any).setItem(sKey, (oStorage as any)[sKey]);
+        } else {
+          aKeys.splice(iThisIndx, 1);
+        }
+        delete (oStorage as any)[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { (oStorage as any).removeItem(aKeys[0]); }
+      for (var aCouple: any, iKey: any, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          (oStorage as any)[iKey = decodeURI(aCouple[0])] = decodeURI(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  } as any)());
+}
+
+var CONFIG_DEMO: any = null;
+
+if (window.localStorage.getItem('configDemo')) {
+  CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
+}

packages/ionic-angular/demos/src/config/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/config/pages/page-one/page-one.html

@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab tabTitle="Music" tabIcon="musical-notes" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Movies" tabIcon="videocam" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Games" tabIcon="game-controller-b" [root]="tabOne"></ion-tab>
+</ion-tabs>

packages/ionic-angular/demos/src/config/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/config/pages/page-one/page-one.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageTwo } from '../page-two/page-two';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  tabOne = PageTwo;
+}

packages/ionic-angular/demos/src/config/pages/page-three/page-three.html

@@ -0,0 +1,11 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>Page</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <div padding>
+    <ion-button block (click)="pop()">Go Back to Config</ion-button>
+  </div>
+</ion-content>

packages/ionic-angular/demos/src/config/pages/page-three/page-three.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageThree } from './page-three';
+
+@NgModule({
+  declarations: [
+    PageThree,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageThree),
+  ],
+  entryComponents: [
+    PageThree,
+  ]
+})
+export class PageThreeModule {}

packages/ionic-angular/demos/src/config/pages/page-three/page-three.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { NavController } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-three.html'
+})
+export class PageThree {
+  constructor(public navCtrl: NavController) {}
+
+  pop() {
+    this.navCtrl.pop();
+  }
+}

packages/ionic-angular/demos/src/config/pages/page-two/page-two.html

@@ -0,0 +1,83 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Config</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content class="config-demo">
+
+  <ion-list>
+    <ion-item>
+      <ion-label>Back Button Icon</ion-label>
+      <ion-select [(ngModel)]="config.backButtonIcon">
+        <ion-option value="ios-arrow-back">ios-arrow-back</ion-option>
+        <ion-option value="md-arrow-back">md-arrow-back</ion-option>
+        <ion-option value="close">close</ion-option>
+        <ion-option value="heart">heart</ion-option>
+        <ion-option value="globe">globe</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Icon Mode</ion-label>
+      <ion-select [(ngModel)]="config.iconMode">
+        <ion-option value="ios">ios</ion-option>
+        <ion-option value="md">md</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Tab Placement</ion-label>
+      <ion-select [(ngModel)]="config.tabsPlacement">
+        <ion-option value="bottom">bottom</ion-option>
+        <ion-option value="top">top</ion-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+  <p class="note">Note: the config will not be updated until you click the button below.</p>
+
+  <div padding>
+    <ion-button block (click)="load()">
+      Update Config
+    </ion-button>
+  </div>
+
+  <p class="note">Any config for your app should be passed as the second argument to <code>IonicModule.forRoot()</code>.</p>
+
+  <!-- this has to be formatted weird for pre -->
+  <pre margin>
+&#64;NgModule(&#123;
+  imports: [
+  BrowserModule,
+    IonicModule.forRoot(MyApp, &#123;
+      backButtonIcon: "{{initialConfig?.backButtonIcon}}"
+      iconMode: "{{initialConfig?.iconMode}}"
+      tabsPlacement: "{{initialConfig?.tabsPlacement}}"
+    &#125;)
+  ]
+&#125;)
+</pre>
+
+  <div padding>
+    <ion-button block color="secondary" (click)="push()">
+      Go to Another Page
+    </ion-button>
+  </div>
+
+</ion-content>
+
+<style>
+  .config-demo pre {
+    background-color: #f8f8f8;
+  }
+
+  .config-demo .note {
+    color: #444;
+    font-style: italic;
+    margin: 0 16px;
+  }
+</style>

packages/ionic-angular/demos/src/config/pages/page-two/page-two.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageTwo } from './page-two';
+
+@NgModule({
+  declarations: [
+    PageTwo,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageTwo),
+  ],
+  entryComponents: [
+    PageTwo,
+  ]
+})
+export class PageTwoModule {}

packages/ionic-angular/demos/src/config/pages/page-two/page-two.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { Config, NavController } from '../../../../../src';
+import { PageThree } from '../page-three/page-three';
+
+@Component({
+  templateUrl: 'page-two.html'
+})
+export class PageTwo {
+  config: any;
+  initialConfig: any;
+  constructor(_config: Config,  public navCtrl: NavController) {
+    this.config = _config.settings();
+    this.initialConfig = this.config;
+  }
+
+  load() {
+    window.localStorage.setItem('configDemo', JSON.stringify(this.config));
+    window.location.reload();
+  }
+
+  push() {
+    this.navCtrl.push(PageThree);
+  }
+}

packages/ionic-angular/demos/src/config/pages/push-page.html

@@ -0,0 +1,11 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>Page</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <div padding>
+    <ion-button block (click)="pop()">Go Back to Config</ion-button>
+  </div>
+</ion-content>

packages/ionic-angular/demos/src/datetime/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/datetime/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/datetime/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/datetime/pages/page-one/page-one.html

@@ -0,0 +1,75 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>DateTime</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-list-header>Web Release Dates</ion-list-header>
+
+    <ion-item>
+      <ion-label>World Wide Web</ion-label>
+      <ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Netscape</ion-label>
+      <ion-datetime displayFormat="MMMM YY" min="1989" max="2004" [(ngModel)]="netscapeReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Opera</ion-label>
+      <ion-datetime displayFormat="DDD DD.MM.YY" min="1990" max="2000" [dayShortNames]="operaShortDay" [(ngModel)]="operaReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Webkit</ion-label>
+      <ion-datetime displayFormat="D MMM YYYY" min="1990-02" max="2010-10" [(ngModel)]="webkitReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Firefox</ion-label>
+      <ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Chrome</ion-label>
+      <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>World Times</ion-list-header>
+
+    <ion-item>
+      <ion-label>Tokyo</ion-label>
+      <ion-datetime displayFormat="hh:mm A" [(ngModel)]="tokyoTime"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Paris</ion-label>
+      <ion-datetime displayFormat="HH:mm" [(ngModel)]="parisTime"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Madison</ion-label>
+      <ion-datetime displayFormat="h:mm a" [(ngModel)]="madisonTime"></ion-datetime>
+    </ion-item>
+
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>Set Alarm</ion-list-header>
+
+    <ion-item>
+      <ion-label>Alert</ion-label>
+      <ion-datetime displayFormat="mm" minuteValues="0,15,30,45" [(ngModel)]="alertTime"></ion-datetime>
+    </ion-item>
+  </ion-list>
+
+</ion-content>

packages/ionic-angular/demos/src/datetime/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/datetime/pages/page-one/page-one.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  wwwReleased = '1991';
+  netscapeReleased = '1994-12-15T13:47:20.789';
+  operaReleased = '1995-04-15';
+  webkitReleased = '1998-11-04T11:06Z';
+  firefoxReleased = '2002-09-23T15:03:46.789';
+  chromeReleased = '2008-09-02';
+
+  tokyoTime: string;
+  parisTime: string;
+  madisonTime: string;
+  alertTime = '10:15';
+
+  operaShortDay = [
+    's\u00f8n',
+    'man',
+    'tir',
+    'ons',
+    'tor',
+    'fre',
+    'l\u00f8r'
+  ];
+
+  constructor() {
+    this.tokyoTime = this.calculateTime('+9');
+    this.parisTime = this.calculateTime('+1');
+    this.madisonTime = this.calculateTime('-6');
+
+    // If it is Daylight Savings Time
+    if (this.dst(new Date())) {
+      this.parisTime = this.calculateTime('+2');
+      this.madisonTime = this.calculateTime('-5');
+    }
+  }
+
+  calculateTime(offset: any) {
+    // create Date object for current location
+    let d = new Date();
+
+    // create new Date object for different city
+    // using supplied offset
+    let nd = new Date(d.getTime() + (3600000 * offset));
+
+    return nd.toISOString();
+  }
+
+  // Determine if the client uses DST
+  stdTimezoneOffset(today: any) {
+    let jan = new Date(today.getFullYear(), 0, 1);
+    let jul = new Date(today.getFullYear(), 6, 1);
+    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
+  }
+
+  dst(today: any) {
+    return today.getTimezoneOffset() < this.stdTimezoneOffset(today);
+  }
+}

packages/ionic-angular/demos/src/events/app/app.component.html

@@ -0,0 +1,43 @@
+<ion-menu #menu [content]="content">
+
+  <ion-header>
+    <ion-toolbar color="secondary">
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+
+    <ion-list *ngIf="loggedIn">
+      <ion-list-header>
+        Logged in as <b>Administrator</b>
+      </ion-list-header>
+      <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
+        <ion-label color="primary">{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+
+    <ion-list *ngIf="!loggedIn">
+      <ion-list-header>
+        Please Log In
+      </ion-list-header>
+      <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
+        <ion-label color="primary">{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="root" #content swipeBackEnabled="false"></ion-nav>

packages/ionic-angular/demos/src/events/app/app.component.ts

@@ -0,0 +1,45 @@
+import { Component, ViewChild } from '@angular/core';
+import { Events, Nav } from '../../../../src';
+
+import { PageOne } from '../pages/page-one/page-one';
+import { PageTwo } from '../pages/page-two/page-two';
+
+@Component({
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+
+  @ViewChild(Nav) nav: Nav;
+
+  root = PageOne;
+  loggedIn = false;
+
+  loggedInPages = [
+    { title: 'Logout', component: PageTwo }
+  ];
+
+  loggedOutPages = [
+    { title: 'Login', component: PageOne }
+  ];
+
+  constructor(private events: Events) {
+    this.listenToLoginEvents();
+  }
+
+  openPage(menu: any, page: any) {
+    // find the nav component and set what the root page should be
+    // reset the nav to remove previous pages and only have this page
+    // we wouldn't want the back button to show in this scenario
+    this.nav.setRoot(page.component);
+  }
+
+  listenToLoginEvents() {
+    this.events.subscribe('user:login', () => {
+      this.loggedIn = true;
+    });
+
+    this.events.subscribe('user:logout', () => {
+      this.loggedIn = false;
+    });
+  }
+}

packages/ionic-angular/demos/src/events/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+import { PageTwoModule } from '../pages/page-two/page-two.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule,
+    PageTwoModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/events/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/events/pages/page-one/page-one.html

@@ -0,0 +1,37 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </ion-button>
+
+    <ion-title>
+      Events
+    </ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <h3 margin-left>Login</h3>
+  <p margin>Click the login button to use the credentials below. Then, toggle the menu to see the menu items change.</p>
+
+  <ion-list no-margin>
+    <ion-item>
+      <ion-label stacked color="primary">Name</ion-label>
+      <ion-input [(ngModel)]="user.name" disabled></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label stacked color="primary">Username</ion-label>
+      <ion-input [(ngModel)]="user.username" disabled></ion-input>
+    </ion-item>
+  </ion-list>
+
+  <div padding>
+    <ion-button block (click)="login()">Login</ion-button>
+    <ion-button block color="secondary" menuToggle>Toggle Menu</ion-button>
+  </div>
+
+</ion-content>

packages/ionic-angular/demos/src/events/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/events/pages/page-one/page-one.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Events } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  user = {
+    name: 'Administrator',
+    username: 'admin'
+  };
+
+  constructor(private events: Events) {}
+
+  login() {
+    this.events.publish('user:login');
+  }
+}

packages/ionic-angular/demos/src/events/pages/page-two/page-two.html

@@ -0,0 +1,23 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </ion-button>
+
+    <ion-title>
+      Events
+    </ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+<ion-content>
+  <h3 margin-left>Logout</h3>
+  <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
+
+  <div padding>
+    <ion-button block (click)="logout()">Logout</ion-button>
+    <ion-button block color="secondary" menuToggle>Toggle Menu</ion-button>
+  </div>
+</ion-content>

packages/ionic-angular/demos/src/events/pages/page-two/page-two.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageTwo } from './page-two';
+
+@NgModule({
+  declarations: [
+    PageTwo,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageTwo),
+  ],
+  entryComponents: [
+    PageTwo,
+  ]
+})
+export class PageTwoModule {}

packages/ionic-angular/demos/src/events/pages/page-two/page-two.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { Events } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-two.html'
+})
+export class PageTwo {
+  constructor(private events: Events) {}
+
+  logout() {
+    this.events.publish('user:logout');
+  }
+}

packages/ionic-angular/demos/src/fab/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/fab/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/fab/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/fab/pages/page-one/page-one.html

@@ -0,0 +1,72 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Floating Action Buttons</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen>
+  <div f></div>
+  <div f></div>
+  <div f *ngFor="let a of array"></div>
+
+  <ion-fab top right edge #fab1>
+    <button ion-fab mini (click)="clickMainFAB()"><ion-icon name="add"></ion-icon></button>
+    <ion-fab-list>
+      <button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab1)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab1)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right bottom #fab2>
+    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab2)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab2)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left top #fab3>
+    <button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab3)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab3)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left bottom #fab4>
+    <button ion-fab color="dark"><ion-icon name="arrow-dropup"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab4)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab4)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab center middle #fab5>
+    <button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right middle>
+    <button ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></button>
+  </ion-fab>
+
+</ion-content>

packages/ionic-angular/demos/src/fab/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/fab/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { FabContainer } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  array: number[] = [];
+
+  add() {
+    this.array.push(1);
+  }
+
+  clickMainFAB() {
+    console.log('Clicked open social menu');
+  }
+
+  openSocial(network: string, fab: FabContainer) {
+    console.log('Share in ' + network);
+    fab.close();
+  }
+}

packages/ionic-angular/demos/src/hide-when/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/hide-when/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/hide-when/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/hide-when/pages/page-one/page-one.html

@@ -0,0 +1,61 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>HideWhen</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content class="hide-when-demo">
+
+  <h5 margin>Hide Icon Per Platform</h5>
+  <p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+</ion-content>
+
+<style>
+  .hide-when-demo ion-col {
+    background: #f8f8f8;
+    border: 1px solid #ddd;
+    margin: 1%;
+    max-width: 48%;
+    flex: 0 0 48%;
+    min-height: 120px;
+  }
+
+  .hide-when-demo code {
+    background: #f8f8f8;
+  }
+
+  .hide-when-demo ion-icon {
+    font-size: 100px;
+  }
+</style>

packages/ionic-angular/demos/src/hide-when/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/hide-when/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

packages/ionic-angular/demos/src/icon/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/icon/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/icon/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/icon/pages/page-one/page-one.html

@@ -0,0 +1,77 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Icon</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center class="icon-demo">
+
+  <ion-row>
+    <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
+    <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
+    <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
+    <ion-col><ion-icon name="people"></ion-icon></ion-col>
+    <ion-col><ion-icon name="person"></ion-icon></ion-col>
+    <ion-col><ion-icon name="contact"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="apps"></ion-icon></ion-col>
+    <ion-col><ion-icon name="lock"></ion-icon></ion-col>
+    <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="unlock"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
+    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
+    <ion-col><ion-icon name="locate"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="mic"></ion-icon></ion-col>
+    <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
+    <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
+    <ion-col><ion-icon name="microphone"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
+    <ion-col><ion-icon name="bus"></ion-icon></ion-col>
+    <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="camera"></ion-icon></ion-col>
+    <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
+    <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
+    <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
+  </ion-row>
+
+</ion-content>
+
+<style>
+  .icon-demo ion-icon {
+    font-size: 50px;
+  }
+
+  .icon-demo ion-row {
+    height: 100%;
+    flex-wrap: wrap;
+  }
+
+  .icon-demo ion-col {
+    flex: 0 0 25%;
+    max-width: 25%;
+    text-align: center;
+    padding: 10px 5px;
+  }
+</style>

packages/ionic-angular/demos/src/icon/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/icon/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

packages/ionic-angular/demos/src/infinite-scroll/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/infinite-scroll/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/infinite-scroll/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/infinite-scroll/pages/page-one/page-one.html

@@ -0,0 +1,25 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Infinite Scroll</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+    <ion-item *ngFor="let item of items">
+      {{ item }}
+    </ion-item>
+  </ion-list>
+
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+</ion-content>

packages/ionic-angular/demos/src/infinite-scroll/pages/page-one/page-one.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+import { MockProvider } from './provider';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  providers: [
+    MockProvider
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/infinite-scroll/pages/page-one/page-one.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { MockProvider} from './provider';
+import { InfiniteScroll } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  items: string[];
+
+  constructor(private mockProvider: MockProvider) {
+    this.items = mockProvider.getData();
+  }
+
+  doInfinite(infiniteScroll: InfiniteScroll) {
+    this.mockProvider.getAsyncData().then((newData) => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.push( newData[i] );
+      }
+
+      infiniteScroll.complete();
+
+      if (this.items.length > 90) {
+        infiniteScroll.enable(false);
+      }
+    });
+  }
+}

packages/ionic-angular/demos/src/infinite-scroll/pages/page-one/provider.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MockProvider {
+
+  getData(): any[] {
+    // return mock data synchronously
+    let data: any[] = [];
+    for (var i = 0; i < 20; i++) {
+      data.push( this._getRandomData() );
+    }
+    return data;
+  }
+
+  getAsyncData(): Promise<any[]> {
+    // async receive mock data
+    return new Promise(resolve => {
+
+      setTimeout(() => {
+        resolve(this.getData());
+      }, 1000);
+
+    });
+  }
+
+  private _getRandomData() {
+    let i = Math.floor( Math.random() * this._data.length );
+    return this._data[i];
+  }
+
+  private _data = [
+    'Fast Times at Ridgemont High',
+    'Peggy Sue Got Married',
+    'Raising Arizona',
+    'Moonstruck',
+    'Fire Birds',
+    'Honeymoon in Vegas',
+    'Amos & Andrew',
+    'It Could Happen to You',
+    'Trapped in Paradise',
+    'Leaving Las Vegas',
+    'The Rock',
+    'Con Air',
+    'Face/Off',
+    'City of Angels',
+    'Gone in Sixty Seconds',
+    'The Family Man',
+    'Windtalkers',
+    'Matchstick Men',
+    'National Treasure',
+    'Ghost Rider',
+    'Grindhouse',
+    'Next',
+    'Kick-Ass',
+    'Drive Angry',
+  ];
+
+}

packages/ionic-angular/demos/src/input/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/input/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/input/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/input/pages/page-one/page-one.html

@@ -0,0 +1,47 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Input</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+    <ion-item>
+      <ion-label color="primary">Inline Label</ion-label>
+      <ion-input placeholder="Text Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" fixed>Fixed Label</ion-label>
+      <ion-input type="tel" placeholder="Tel Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-input type="number" placeholder="Number Input with no label"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
+      <ion-input type="email" placeholder="Email Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
+      <ion-input type="password" placeholder="Password Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" floating>Floating Label</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-input placeholder="Clear Input" clearInput></ion-input>
+    </ion-item>
+  </ion-list>
+
+</ion-content>

packages/ionic-angular/demos/src/input/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/input/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

packages/ionic-angular/demos/src/item-reorder/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/item-reorder/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/item-reorder/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/item-reorder/pages/page-one/page-one.html

@@ -0,0 +1,28 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Item Reorder</ion-title>
+    <ion-buttons end>
+      <ion-button (click)="toggleEdit()">{{editButton}}</ion-button>
+    </ion-buttons>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content fullscreen>
+
+  <ion-list class="chat-sliding-demo">
+    <ion-list-header>
+      Playlist
+    </ion-list-header>
+
+    <ion-item-group [reorder]="editing" (ionItemReorder)="reorderData($event)">
+      <ion-item *ngFor="let song of songs">
+        <h2>{{ song.title }}</h2>
+        <p>{{ song.band }} • {{ song.album }}</p>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+</ion-content>

packages/ionic-angular/demos/src/item-reorder/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/item-reorder/pages/page-one/page-one.ts

@@ -0,0 +1,74 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { NavController, reorderArray } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class PageOne {
+  songs: any[];
+  editButton: string = 'Edit';
+  editing: boolean = false;
+
+  constructor(public navCtrl: NavController) {
+    this.songs = [
+    {
+      title: 'Everything Beta',
+      band: 'Phoria',
+      album: 'Volition'
+    },
+    {
+      title: 'Hello',
+      band: 'Adele',
+      album: '25'
+    },
+    {
+      title: 'Bohemian Rhapsody',
+      band: 'Queen',
+      album: 'A Night at the Opera'
+    },
+    {
+      title: 'Don\'t Stop Believin\'',
+      band: 'Journey',
+      album: 'Escape'
+    },
+    {
+      title: 'Smells Like Teen Spirit',
+      band: 'Nirvana',
+      album: 'Nevermind'
+    },
+    {
+      title: 'All You Need Is Love',
+      band: 'The Beatles',
+      album: 'Magical Mystery Tour'
+    },
+    {
+      title: 'Hotel California',
+      band: 'The Eagles',
+      album: 'Hotel California'
+    },
+    {
+      title: 'The Hand That Feeds',
+      band: 'Nine Inch Nails',
+      album: 'With Teeth'
+    },
+    {
+      title: 'Who Are You',
+      band: 'The Who',
+      album: 'Who Are You'
+    }];
+  }
+
+  toggleEdit() {
+    this.editing = !this.editing;
+    if (this.editing) {
+      this.editButton = 'Done';
+    } else {
+      this.editButton = 'Edit';
+    }
+  }
+
+  reorderData(indexes: any) {
+    this.songs = reorderArray(this.songs, indexes);
+  }
+}

packages/ionic-angular/demos/src/item-sliding/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/item-sliding/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/item-sliding/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);