diff --git a/demos/component-docs/action-sheets/basic/basic.html b/demos/component-docs/action-sheets/basic/basic.html
index 72198d0602..4d17f50a40 100644
--- a/demos/component-docs/action-sheets/basic/basic.html
+++ b/demos/component-docs/action-sheets/basic/basic.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Action Sheet</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/action-sheets/basic/pages.ts b/demos/component-docs/action-sheets/basic/pages.ts
index 20a7e6da02..e412dd31bf 100644
--- a/demos/component-docs/action-sheets/basic/pages.ts
+++ b/demos/component-docs/action-sheets/basic/pages.ts
@@ -23,43 +23,57 @@ export class BasicPage {
 
     if (this.platform.is('android')) {
       var androidSheet = {
-
+        title: 'Albums',
         buttons: [
-          { text: 'Share', icon: 'share' },
-          { text: 'Play', icon: 'arrow-dropright-circle'},
-          { text: 'Favorite', icon: 'ion-md-heart-outline'}
+          { text: 'Share',
+            handler: buttonHandler,
+            icon: 'share'
+          },
+          { text: 'Play',
+            handler: buttonHandler,
+            icon: 'arrow-dropright-circle'
+          },
+          { text: 'Favorite',
+            handler: buttonHandler,
+            icon: 'ion-md-heart-outline'
+          },
+          {
+            text: 'Delete',
+            style: 'destructive',
+            handler: () => {
+              console.log('Destructive clicked');
+            }
+          },
+          {
+            text: 'Cancel',
+            style: 'cancel',
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
         ],
-        destructiveText: 'Delete',
-        titleText: 'Albums',
-        cancelText: 'Cancel',
-        cancel: function() {
-          console.log('Canceled');
-        },
-        destructiveButtonClicked: () => {
-          console.log('Destructive clicked');
-        },
-        buttonClicked: function(index) {
-          console.log('Button clicked', index);
-          if (index == 1) { return false; }
-          return true;
-        }
       };
     }
 
-    this.actionSheet = ActionSheet.create(androidSheet || {
-      title: 'Albums',
+    let actionSheet = ActionSheet.create( androidSheet || {
       buttons: [
         {
           text: 'Share',
-          handler: buttonHandler
+          handler: () => {
+            console.log('Share clicked');
+          }
         },
         {
           text: 'Play',
-          handler: buttonHandler
+          handler: () => {
+            console.log('Play clicked');
+          }
         },
         {
           text: 'Favorite',
-          handler: buttonHandler
+          handler: () => {
+            console.log('Favorite clicked');
+          }
         },
         {
           text: 'Delete',
@@ -72,18 +86,17 @@ export class BasicPage {
           text: 'Cancel',
           style: 'cancel',
           handler: () => {
-            console.log('Canceled');
+            console.log('Cancel clicked');
           }
         }
-      ],
-
+      ]
     });
 
-    this.nav.present(this.actionSheet);
+    this.nav.present(actionSheet);
   }
 
   onPageWillLeave() {
-    this.actionSheet && this.actionSheet.dismiss();
+    actionSheet && actionSheet.dismiss();
   }
 
 }
diff --git a/demos/component-docs/popups/popups.ts b/demos/component-docs/alerts/alerts.ts
similarity index 100%
rename from demos/component-docs/popups/popups.ts
rename to demos/component-docs/alerts/alerts.ts
diff --git a/demos/component-docs/alerts/basic/pages.ts b/demos/component-docs/alerts/basic/pages.ts
new file mode 100644
index 0000000000..f932a49cde
--- /dev/null
+++ b/demos/component-docs/alerts/basic/pages.ts
@@ -0,0 +1,84 @@
+import {Page, Alert, NavController} from 'ionic/ionic';
+import {AndroidAttribute} from '../../helpers';
+import {forwardRef} from 'angular2/core';
+
+
+@Page({
+  templateUrl: 'alerts/basic/template.html',
+  directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+
+  doAlert() {
+    let alert = Alert.create({
+      title: 'New Friend!',
+      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
+      buttons: ['Ok']
+    });
+    this.nav.present(alert);
+  }
+
+  doPrompt() {
+    Baasbox Javascript SDK
+    let prompt = Alert.create({
+      title: 'Login',
+      body: "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');
+          }
+        }
+      ]
+    });
+    this.nav.present(prompt);
+  }
+
+  doConfirm() {
+    let confirm = Alert.create({
+      title: 'Use this lightsaber?',
+      body: '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');
+          }
+        }
+      ]
+    });
+    this.nav.present(confirm);
+  }
+
+  // onPageWillLeave() {
+  //   let popup = this.popup.get();
+  //   // only try to close if there is an active popup
+  //   if (popup) {
+  //     popup.close();
+  //   }
+  // }
+
+}
diff --git a/demos/component-docs/popups/basic/template.html b/demos/component-docs/alerts/basic/template.html
similarity index 80%
rename from demos/component-docs/popups/basic/template.html
rename to demos/component-docs/alerts/basic/template.html
index 771bec071d..5bd75d8b7e 100644
--- a/demos/component-docs/popups/basic/template.html
+++ b/demos/component-docs/alerts/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Popups</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/badge/basic/template.html b/demos/component-docs/badge/basic/template.html
index b8056f08b3..77965ece5a 100644
--- a/demos/component-docs/badge/basic/template.html
+++ b/demos/component-docs/badge/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Badge</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/basic/basic.html b/demos/component-docs/buttons/basic/basic.html
index 4ad97cbf5c..05318b4ef3 100644
--- a/demos/component-docs/buttons/basic/basic.html
+++ b/demos/component-docs/buttons/basic/basic.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/block/block.html b/demos/component-docs/buttons/block/block.html
index 2942033b74..b79d49e5f5 100644
--- a/demos/component-docs/buttons/block/block.html
+++ b/demos/component-docs/buttons/block/block.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Block Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/clear/clear.html b/demos/component-docs/buttons/clear/clear.html
index 859fab2326..dc0545ec46 100644
--- a/demos/component-docs/buttons/clear/clear.html
+++ b/demos/component-docs/buttons/clear/clear.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Clear Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/components/components.html b/demos/component-docs/buttons/components/components.html
index bfd9d6ad00..0107b17e31 100644
--- a/demos/component-docs/buttons/components/components.html
+++ b/demos/component-docs/buttons/components/components.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>Buttons</ion-title>
 
diff --git a/demos/component-docs/buttons/fab/fab.html b/demos/component-docs/buttons/fab/fab.html
index 6392467eba..7cb7266880 100644
--- a/demos/component-docs/buttons/fab/fab.html
+++ b/demos/component-docs/buttons/fab/fab.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>FAB</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/full/full.html b/demos/component-docs/buttons/full/full.html
index a6a0e609dd..0aee380cd7 100644
--- a/demos/component-docs/buttons/full/full.html
+++ b/demos/component-docs/buttons/full/full.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Full Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/icons/icons.html b/demos/component-docs/buttons/icons/icons.html
index eebb3ee74f..0ae1d1771d 100644
--- a/demos/component-docs/buttons/icons/icons.html
+++ b/demos/component-docs/buttons/icons/icons.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Icon Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/outline/outline.html b/demos/component-docs/buttons/outline/outline.html
index 929272f7a6..68a7de7ea2 100644
--- a/demos/component-docs/buttons/outline/outline.html
+++ b/demos/component-docs/buttons/outline/outline.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Outline Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/round/round.html b/demos/component-docs/buttons/round/round.html
index e044fde8de..788cad03e9 100644
--- a/demos/component-docs/buttons/round/round.html
+++ b/demos/component-docs/buttons/round/round.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Round Buttons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/buttons/sizes/sizes.html b/demos/component-docs/buttons/sizes/sizes.html
index cb13ca485c..d3e5bd42ac 100644
--- a/demos/component-docs/buttons/sizes/sizes.html
+++ b/demos/component-docs/buttons/sizes/sizes.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Button Sizes</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/advanced-map/template.html b/demos/component-docs/cards/advanced-map/template.html
index 2aba3b99e5..2a19d91eb7 100644
--- a/demos/component-docs/cards/advanced-map/template.html
+++ b/demos/component-docs/cards/advanced-map/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Map Card</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/advanced-social/template.html b/demos/component-docs/cards/advanced-social/template.html
index 7dc6514471..ad7248df65 100644
--- a/demos/component-docs/cards/advanced-social/template.html
+++ b/demos/component-docs/cards/advanced-social/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Social Card</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/advanced-weather/template.html b/demos/component-docs/cards/advanced-weather/template.html
index 36ce2bab6d..fe7ea96692 100644
--- a/demos/component-docs/cards/advanced-weather/template.html
+++ b/demos/component-docs/cards/advanced-weather/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Weather Card</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/background/template.html b/demos/component-docs/cards/background/template.html
index 91f0e4e9f4..3327ae7620 100644
--- a/demos/component-docs/cards/background/template.html
+++ b/demos/component-docs/cards/background/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Background Images</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/basic/template.html b/demos/component-docs/cards/basic/template.html
index cc5439bce7..48c9d56808 100644
--- a/demos/component-docs/cards/basic/template.html
+++ b/demos/component-docs/cards/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Basic Cards</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/header/template.html b/demos/component-docs/cards/header/template.html
index 0b30caaeec..f9a9fa3733 100644
--- a/demos/component-docs/cards/header/template.html
+++ b/demos/component-docs/cards/header/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Card Headers</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/image/template.html b/demos/component-docs/cards/image/template.html
index cb22295da1..f4e55d4c3b 100644
--- a/demos/component-docs/cards/image/template.html
+++ b/demos/component-docs/cards/image/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Card Images</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/cards/list/template.html b/demos/component-docs/cards/list/template.html
index d76f762600..dfa012d59d 100644
--- a/demos/component-docs/cards/list/template.html
+++ b/demos/component-docs/cards/list/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Card Lists</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/grid/basic/template.html b/demos/component-docs/grid/basic/template.html
index e26b954bd2..6fa6738f9e 100644
--- a/demos/component-docs/grid/basic/template.html
+++ b/demos/component-docs/grid/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Grid</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index 9ae0db33f4..6df008b63b 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -13,7 +13,7 @@ import * as lists from './lists/lists';
 import * as menus from './menus/menus';
 import * as modals from './modals/modals';
 import * as navigation from './navigation/navigation';
-import * as popups from './popups/popups';
+import * as alerts from './alerts/alerts';
 import * as slides from './slides/slides';
 import * as tabs from './tabs/tabs';
 
@@ -72,6 +72,8 @@ export function getPageFor(hash) {
     return {
         'overview': actionSheets.BasicPage,
         'action-sheets': actionSheets.BasicPage,
+        'alert': alerts.BasicPage,
+
         'badges': badges.BasicPage,
 
         'buttons': buttons.BasicPage,
@@ -100,8 +102,9 @@ export function getPageFor(hash) {
         'range': inputs.RangePage,
         'segment': inputs.SegmentPage,
         'select': inputs.SelectPage,
-        'switch': inputs.SwitchPage,
         'searchbar': inputs.SearchPage,
+        'toggle': inputs.TogglePage,
+
 
         'inputs': labels.BasicPage,
         'fixed-inline-labels': labels.FixedInlinePage,
@@ -127,7 +130,6 @@ export function getPageFor(hash) {
         'menus': menus.BasicPage,
         'modals': modals.BasicPage,
         'navigation': navigation.BasicPage,
-        'popups': popups.BasicPage,
         'slides': slides.BasicPage,
 
         'tabs': tabs.BasicPage,
diff --git a/demos/component-docs/icons/basic/template.html b/demos/component-docs/icons/basic/template.html
index e68e87b4d3..59b6bbe249 100644
--- a/demos/component-docs/icons/basic/template.html
+++ b/demos/component-docs/icons/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Icons</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 1823f3079c..988788dcc4 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -36,8 +36,6 @@ class DemoApp {
 
       window.addEventListener('message', (e) => {
         //TODO(@drewrygh)
-        e = {};
-        e.data = '{}';
         zone.run(() => {
           if (e.data) {
             var data;
diff --git a/demos/component-docs/inputs/checkbox/template.html b/demos/component-docs/inputs/checkbox/template.html
index 55adaa2c66..79c85fd339 100644
--- a/demos/component-docs/inputs/checkbox/template.html
+++ b/demos/component-docs/inputs/checkbox/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
     Checkbox
diff --git a/demos/component-docs/inputs/inputs.ts b/demos/component-docs/inputs/inputs.ts
index e8c13a52a9..d0d84fe13a 100644
--- a/demos/component-docs/inputs/inputs.ts
+++ b/demos/component-docs/inputs/inputs.ts
@@ -4,4 +4,4 @@ export * from './range/pages';
 export * from './search/pages';
 export * from './segment/pages';
 export * from './select/pages';
-export * from './switch/pages';
+export * from './toggle/pages';
diff --git a/demos/component-docs/inputs/radio/template.html b/demos/component-docs/inputs/radio/template.html
index 975aeec920..cc03c4f1d4 100644
--- a/demos/component-docs/inputs/radio/template.html
+++ b/demos/component-docs/inputs/radio/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
     Radio
diff --git a/demos/component-docs/inputs/range/template.html b/demos/component-docs/inputs/range/template.html
index 1b0f0dfbd3..f2ab4661cb 100644
--- a/demos/component-docs/inputs/range/template.html
+++ b/demos/component-docs/inputs/range/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
     Range
diff --git a/demos/component-docs/inputs/search/template.html b/demos/component-docs/inputs/search/template.html
index 96b3070a52..f02ae0ac12 100644
--- a/demos/component-docs/inputs/search/template.html
+++ b/demos/component-docs/inputs/search/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>
     Searchbar
   </ion-title>
diff --git a/demos/component-docs/inputs/segment/template.html b/demos/component-docs/inputs/segment/template.html
index c55ee419a7..9d750d8b0e 100644
--- a/demos/component-docs/inputs/segment/template.html
+++ b/demos/component-docs/inputs/segment/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
     Segment
diff --git a/demos/component-docs/inputs/select/template.html b/demos/component-docs/inputs/select/template.html
index 4f1193b610..034d7de00b 100644
--- a/demos/component-docs/inputs/select/template.html
+++ b/demos/component-docs/inputs/select/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
     Select
diff --git a/demos/component-docs/inputs/switch/pages.ts b/demos/component-docs/inputs/toggle/pages.ts
similarity index 74%
rename from demos/component-docs/inputs/switch/pages.ts
rename to demos/component-docs/inputs/toggle/pages.ts
index b7b4e2c2b4..f84cd5329b 100644
--- a/demos/component-docs/inputs/switch/pages.ts
+++ b/demos/component-docs/inputs/toggle/pages.ts
@@ -3,10 +3,10 @@ import {forwardRef} from 'angular2/core';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'inputs/switch/template.html',
+  templateUrl: 'inputs/toggle/template.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
-export class SwitchPage{
+export class TogglePage{
   constructor() {
   }
 }
diff --git a/demos/component-docs/inputs/switch/template.html b/demos/component-docs/inputs/toggle/template.html
similarity index 92%
rename from demos/component-docs/inputs/switch/template.html
rename to demos/component-docs/inputs/toggle/template.html
index f84f900273..6835b2ec0d 100644
--- a/demos/component-docs/inputs/switch/template.html
+++ b/demos/component-docs/inputs/toggle/template.html
@@ -1,7 +1,7 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <ion-title>
-    Switch
+    Toggle
   </ion-title>
 
 </ion-navbar>
diff --git a/demos/component-docs/labels/basic/template.html b/demos/component-docs/labels/basic/template.html
index dc50b20bc4..bbbe65869a 100644
--- a/demos/component-docs/labels/basic/template.html
+++ b/demos/component-docs/labels/basic/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Forms</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/labels/fixed-inline/template.html b/demos/component-docs/labels/fixed-inline/template.html
index 3d8eca5b85..ce19b5eed8 100644
--- a/demos/component-docs/labels/fixed-inline/template.html
+++ b/demos/component-docs/labels/fixed-inline/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Fixed Labels</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/labels/floating/template.html b/demos/component-docs/labels/floating/template.html
index 18d8a66040..3320e05bf4 100644
--- a/demos/component-docs/labels/floating/template.html
+++ b/demos/component-docs/labels/floating/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Floating Labels</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/labels/inline/template.html b/demos/component-docs/labels/inline/template.html
index 91c2860271..f30d398460 100644
--- a/demos/component-docs/labels/inline/template.html
+++ b/demos/component-docs/labels/inline/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Inline Labels</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/labels/inset/template.html b/demos/component-docs/labels/inset/template.html
index ef8f8a7cf1..0b8a85dfab 100644
--- a/demos/component-docs/labels/inset/template.html
+++ b/demos/component-docs/labels/inset/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Inset Labels</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/labels/placeholder/template.html b/demos/component-docs/labels/placeholder/template.html
index 70077c672f..1a35dda6e8 100644
--- a/demos/component-docs/labels/placeholder/template.html
+++ b/demos/component-docs/labels/placeholder/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Placeholders</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/labels/stacked/template.html b/demos/component-docs/labels/stacked/template.html
index aba3e71703..3e6dc94189 100644
--- a/demos/component-docs/labels/stacked/template.html
+++ b/demos/component-docs/labels/stacked/template.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Stacked Labels</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/avatar/template.html b/demos/component-docs/lists/avatar/template.html
index 2b123424cf..10d726f8a5 100644
--- a/demos/component-docs/lists/avatar/template.html
+++ b/demos/component-docs/lists/avatar/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Avatar List</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/basic/template.html b/demos/component-docs/lists/basic/template.html
index 30cfe30c3a..fc4053e541 100644
--- a/demos/component-docs/lists/basic/template.html
+++ b/demos/component-docs/lists/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Lists</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/headers/template.html b/demos/component-docs/lists/headers/template.html
index 7c45b75720..05c5203263 100644
--- a/demos/component-docs/lists/headers/template.html
+++ b/demos/component-docs/lists/headers/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>List Headers</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/icon/template.html b/demos/component-docs/lists/icon/template.html
index ab2e9207a3..e2f4fa2a2a 100644
--- a/demos/component-docs/lists/icon/template.html
+++ b/demos/component-docs/lists/icon/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Icon List</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/inset/template.html b/demos/component-docs/lists/inset/template.html
index 4461c248a8..77ba1cc7c5 100644
--- a/demos/component-docs/lists/inset/template.html
+++ b/demos/component-docs/lists/inset/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Inset List</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/multiline/template.html b/demos/component-docs/lists/multiline/template.html
index c9e4143f68..674f4137ac 100644
--- a/demos/component-docs/lists/multiline/template.html
+++ b/demos/component-docs/lists/multiline/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Multiline Items</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/no-lines/template.html b/demos/component-docs/lists/no-lines/template.html
index 0d25485c0a..6ed056ded5 100644
--- a/demos/component-docs/lists/no-lines/template.html
+++ b/demos/component-docs/lists/no-lines/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>No Lines</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/lists/thumbnail/template.html b/demos/component-docs/lists/thumbnail/template.html
index f5cac55e31..a0833d434a 100644
--- a/demos/component-docs/lists/thumbnail/template.html
+++ b/demos/component-docs/lists/thumbnail/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Thumbnails</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/menus/basic/menu-events.html b/demos/component-docs/menus/basic/menu-events.html
index 70cdb0cac0..a752f2dfff 100644
--- a/demos/component-docs/menus/basic/menu-events.html
+++ b/demos/component-docs/menus/basic/menu-events.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle>
     <icon menu></icon>
diff --git a/demos/component-docs/menus/basic/menu-friends.html b/demos/component-docs/menus/basic/menu-friends.html
index f58f1446f7..6805d6700e 100644
--- a/demos/component-docs/menus/basic/menu-friends.html
+++ b/demos/component-docs/menus/basic/menu-friends.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle="leftMenu">
     <icon menu></icon>
diff --git a/demos/component-docs/menus/basic/menu-home.html b/demos/component-docs/menus/basic/menu-home.html
index d38cf0a2b2..da8e6d2d50 100644
--- a/demos/component-docs/menus/basic/menu-home.html
+++ b/demos/component-docs/menus/basic/menu-home.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle>
     <icon menu></icon>
diff --git a/demos/component-docs/menus/basic/menu-places.html b/demos/component-docs/menus/basic/menu-places.html
index a18f0f992f..9ef36293bc 100644
--- a/demos/component-docs/menus/basic/menu-places.html
+++ b/demos/component-docs/menus/basic/menu-places.html
@@ -1,4 +1,4 @@
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle="leftMenu">
     <icon menu></icon>
diff --git a/demos/component-docs/navigation/basic/navigation.html b/demos/component-docs/navigation/basic/navigation.html
index 96b4e261f7..7244e8bd56 100644
--- a/demos/component-docs/navigation/basic/navigation.html
+++ b/demos/component-docs/navigation/basic/navigation.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="android-attr">
+<ion-navbar *navbar hideBackButton class="android-attr">
   <ion-title>Navigation</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/popups/basic/pages.ts b/demos/component-docs/popups/basic/pages.ts
deleted file mode 100644
index 54a58ddd46..0000000000
--- a/demos/component-docs/popups/basic/pages.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {Page, Popup} from 'ionic/ionic';
-import {AndroidAttribute} from '../../helpers';
-import {forwardRef} from 'angular2/core';
-
-
-@Page({
-    templateUrl: 'popups/basic/template.html',
-    directives: [forwardRef(() => AndroidAttribute)]
-})
-export class BasicPage {
-
-  constructor(popup: Popup) {
-    this.popup = popup;
-  }
-
-  doAlert() {
-    this.popup.alert({
-        title: "New Friend!",
-        template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
-        cssClass: 'my-alert'
-    });
-  }
-
-  doPrompt() {
-    this.popup.prompt({
-      title: "New Album",
-      template: "Enter a name for this new album you're so keen on adding",
-      inputPlaceholder: "Title",
-      okText: "Save"
-    });
-  }
-
-  doConfirm() {
-    this.popup.confirm({
-      title: "Use this lightsaber?",
-      template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
-      cancelText: "Disagree",
-      okText: "Agree"
-    });
-  }
-
-  onPageWillLeave() {
-    let popup = this.popup.get();
-    // only try to close if there is an active popup
-    if (popup) {
-      popup.close();
-    }
-  }
-
-}
diff --git a/demos/component-docs/slides/basic/template.html b/demos/component-docs/slides/basic/template.html
index dba5b915bf..6535895be0 100644
--- a/demos/component-docs/slides/basic/template.html
+++ b/demos/component-docs/slides/basic/template.html
@@ -1,5 +1,5 @@
 
-<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
   <ion-title>Slides</ion-title>
 </ion-navbar>
 
diff --git a/demos/component-docs/tabs/basic/pages.ts b/demos/component-docs/tabs/basic/pages.ts
index 26c0f35823..c58774093d 100644
--- a/demos/component-docs/tabs/basic/pages.ts
+++ b/demos/component-docs/tabs/basic/pages.ts
@@ -6,7 +6,7 @@ import * as helpers from '../../helpers';
 
 @Page({
   template: '' +
-    '<ion-navbar *navbar hide-back-button [attr.primary]="isAndroid ? \'\' : null">' +
+    '<ion-navbar *navbar hideBackButton [attr.primary]="isAndroid ? \'\' : null">' +
     '<ion-title>Tabs</ion-title>' +
     '</ion-navbar>' +
     '<ion-content>' +
diff --git a/demos/component-docs/tabs/icon-text/pages.ts b/demos/component-docs/tabs/icon-text/pages.ts
index 6e087d0d87..617fee4685 100644
--- a/demos/component-docs/tabs/icon-text/pages.ts
+++ b/demos/component-docs/tabs/icon-text/pages.ts
@@ -6,7 +6,7 @@ import * as helpers from '../../helpers';
 
 @Page({
   template: '' +
-  '<ion-navbar *navbar hide-back-button [attr.royal]="isAndroid ? \'\' : null">' +
+  '<ion-navbar *navbar hideBackButton [attr.royal]="isAndroid ? \'\' : null">' +
     '<ion-title>Tabs</ion-title>' +
   '</ion-navbar>' +
   '<ion-content>' +
diff --git a/demos/component-docs/tabs/icon/pages.ts b/demos/component-docs/tabs/icon/pages.ts
index 1a598dbf43..e0bd0b514d 100644
--- a/demos/component-docs/tabs/icon/pages.ts
+++ b/demos/component-docs/tabs/icon/pages.ts
@@ -6,7 +6,7 @@ import * as helpers from '../../helpers';
 
 @Page({
   template: '' +
-  '<ion-navbar *navbar hide-back-button [attr.danger]="isAndroid ? \'\' : null">' +
+  '<ion-navbar *navbar hideBackButton [attr.danger]="isAndroid ? \'\' : null">' +
     '<ion-title>Tabs</ion-title>' +
   '</ion-navbar>' +
   '<ion-content>' +
diff --git a/ionic/components/label/label.ts b/ionic/components/label/label.ts
index 04f877b8b4..1e85845cf3 100644
--- a/ionic/components/label/label.ts
+++ b/ionic/components/label/label.ts
@@ -1,8 +1,5 @@
-import {Directive, Optional, ElementRef, Renderer} from 'angular2/core';
+import {Directive, ElementRef, Renderer} from 'angular2/core';
 
-import {Config} from '../../config/config';
-import {TextInput} from '../text-input/text-input';
-import {pointerCoord, hasPointerMoved} from '../../util/dom';
 import {Form} from '../../util/form';
 
 
@@ -30,25 +27,16 @@ import {Form} from '../../util/form';
     'id'
   ],
   host: {
-    '[attr.id]': 'id',
-    '(touchstart)': 'pointerStart($event)',
-    '(touchend)': 'pointerEnd($event)',
-    '(mousedown)': 'pointerStart($event)',
-    '(mouseup)': 'pointerEnd($event)'
+    '[attr.id]': 'id'
   }
 })
 export class Label {
 
   constructor(
-    config: Config,
-    @Optional() container: TextInput,
     private _form: Form,
     private _elementRef: ElementRef,
     private _renderer: Renderer
-  ) {
-    this.scrollAssist = config.get('scrollAssist');
-    this.container = container;
-  }
+  ) {}
 
 /**
  * @private
@@ -57,37 +45,6 @@ export class Label {
     if (!this.id) {
       this.id = 'lbl-' + this._form.nextId();
     }
-    this.container && this.container.registerLabel(this);
-  }
-
-  /**
-   * @private
-   */
-  pointerStart(ev) {
-    if (this.scrollAssist) {
-      // remember where the touchstart/mousedown started
-      this.startCoord = pointerCoord(ev);
-    }
-  }
-
-  /**
-   * @private
-   */
-  pointerEnd(ev) {
-    if (this.container) {
-
-      // get where the touchend/mouseup ended
-      let endCoord = pointerCoord(ev);
-
-      // focus this input if the pointer hasn't moved XX pixels
-      if (!hasPointerMoved(20, this.startCoord, endCoord)) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.container.initFocus();
-      }
-
-      this.startCoord = null;
-    }
   }
 
   /**
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 35d82fc37e..a930c66402 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, ContentChild} from 'angular2/core';
+import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, Output, EventEmitter, ContentChild, HostListener} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {NavController} from '../nav/nav-controller';
@@ -7,11 +7,131 @@ import {Form} from '../../util/form';
 import {Label} from '../label/label';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
-import * as dom  from '../../util/dom';
+import {CSS, hasFocus, pointerCoord, hasPointerMoved}  from '../../util/dom';
 import {Platform} from '../../platform/platform';
 import {Button} from '../button/button';
 
 
+/**
+ * @private
+ */
+@Directive({
+  selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=week],input[type=time]',
+  host: {
+    'class': 'text-input'
+  }
+})
+export class TextInputElement {
+  @Input() value: string;
+  @Input() ngModel: any;
+  @Output() valueChange: EventEmitter<string> = new EventEmitter();
+  @Output() focusChange: EventEmitter<boolean> = new EventEmitter();
+
+  constructor(
+    @Attribute('type') type: string,
+    private _elementRef: ElementRef,
+    private _renderer: Renderer
+  ) {
+    this.type = type || 'text';
+  }
+
+  ngOnInit() {
+    if (this.ngModel) {
+      this.value = this.ngModel;
+    } else {
+      this.value = this._elementRef.nativeElement.value;
+    }
+  }
+
+  @HostListener('keyup', ['$event'])
+  _keyup(ev) {
+    this.valueChange.emit(ev.target.value);
+  }
+
+  @HostListener('focus')
+  _focus() {
+    this.focusChange.emit(true);
+  }
+
+  @HostListener('blur')
+  _blur() {
+    this.focusChange.emit(false);
+    this.hideFocus(false);
+  }
+
+  labelledBy(val) {
+    this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', val);
+  }
+
+  setFocus() {
+    this.element().focus();
+  }
+
+  relocate(shouldRelocate, inputRelativeY) {
+    if (this._relocated !== shouldRelocate) {
+
+      let focusedInputEle = this.element();
+      if (shouldRelocate) {
+        let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
+
+        focusedInputEle.classList.add('hide-focused-input');
+        focusedInputEle.style[CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
+        focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
+
+        this.setFocus();
+
+      } else {
+        focusedInputEle.classList.remove('hide-focused-input');
+        focusedInputEle.style[CSS.transform] = '';
+        let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input');
+        if (clonedInputEle) {
+          clonedInputEle.parentNode.removeChild(clonedInputEle);
+        }
+      }
+
+      this._relocated = shouldRelocate;
+    }
+  }
+
+  hideFocus(shouldHideFocus) {
+    let focusedInputEle = this.element();
+
+    if (shouldHideFocus) {
+      let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
+
+      focusedInputEle.classList.add('hide-focused-input');
+      focusedInputEle.style[CSS.transform] = 'translate3d(-9999px,0,0)';
+      focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
+
+    } else {
+      focusedInputEle.classList.remove('hide-focused-input');
+      focusedInputEle.style[CSS.transform] = '';
+      let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
+      if (clonedInputEle) {
+        clonedInputEle.parentNode.removeChild(clonedInputEle);
+      }
+    }
+  }
+
+  hasFocus() {
+    return hasFocus(this.element());
+  }
+
+  addClass(className) {
+    this._renderer.setElementClass(this._elementRef, className, true);
+  }
+
+  hasClass(className) {
+    this._elementRef.nativeElement.classList.contains(className);
+  }
+
+  element() {
+    return this._elementRef.nativeElement;
+  }
+
+}
+
+
 /**
  * @name Input
  * @module ionic
@@ -56,49 +176,43 @@ import {Button} from '../button/button';
     '(touchend)': 'pointerEnd($event)',
     '(mouseup)': 'pointerEnd($event)',
     'class': 'item',
-    '[class.ng-untouched]': 'addNgClass("ng-untouched")',
-    '[class.ng-touched]': 'addNgClass("ng-touched")',
-    '[class.ng-pristine]': 'addNgClass("ng-pristine")',
-    '[class.ng-dirty]': 'addNgClass("ng-dirty")',
-    '[class.ng-valid]': 'addNgClass("ng-valid")',
-    '[class.ng-invalid]': 'addNgClass("ng-invalid")'
+    '[class.ng-untouched]': 'hasClass("ng-untouched")',
+    '[class.ng-touched]': 'hasClass("ng-touched")',
+    '[class.ng-pristine]': 'hasClass("ng-pristine")',
+    '[class.ng-dirty]': 'hasClass("ng-dirty")',
+    '[class.ng-valid]': 'hasClass("ng-valid")',
+    '[class.ng-invalid]': 'hasClass("ng-invalid")'
   },
   template:
     '<div class="item-inner">' +
       '<ng-content></ng-content>' +
-      '<input [type]="type" aria-hidden="true" scroll-assist *ngIf="scrollAssist">' +
+      '<input [type]="type" aria-hidden="true" scroll-assist *ngIf="_assist">' +
       '<button clear *ngIf="clearInput && value" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
     '</div>',
   directives: [NgIf, forwardRef(() => InputScrollAssist), forwardRef(() => TextInputElement), Button]
 })
 export class TextInput {
-  @ContentChild(forwardRef(() => TextInputElement)) textInputElement;
-
   /**
    * @private
    */
   @Input() clearInput: any;
-
-  value: any = '';
+  value: string = '';
 
   constructor(
-    form: Form,
-    elementRef: ElementRef,
     config: Config,
-    renderer: Renderer,
-    app: IonicApp,
-    platform: Platform,
-    @Optional() @Host() scrollView: Content,
-    @Optional() navCtrl: NavController,
+    private _form: Form,
+    private _renderer: Renderer,
+    private _elementRef: ElementRef,
+    private _app: IonicApp,
+    private _platform: Platform,
+    @Optional() @Host() private _scrollView: Content,
+    @Optional() private _nav: NavController,
     @Attribute('floating-label') isFloating: string,
     @Attribute('stacked-label') isStacked: string,
     @Attribute('fixed-label') isFixed: string,
     @Attribute('inset') isInset: string
   ) {
-    this.renderer = renderer;
-
-    this.form = form;
-    form.register(this);
+    _form.register(this);
 
     this.type = 'text';
     this.lastTouch = 0;
@@ -106,40 +220,44 @@ export class TextInput {
     // make more gud with pending @Attributes API
     this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
 
-    this.app = app;
-    this.elementRef = elementRef;
-    this.platform = platform;
-    this.navCtrl = navCtrl;
-
-    this.scrollView = scrollView;
-    this.scrollAssist = config.get('scrollAssist');
+    this._assist = config.get('scrollAssist');
     this.keyboardHeight = config.get('keyboardHeight');
   }
 
   /**
    * @private
-   * This function is used to add the Angular css classes associated with inputs in forms
    */
-   addNgClass(className) {
-     this.input && this.input.elementRef.nativeElement.classList.contains(className);
-   }
+  @ContentChild(TextInputElement)
+  set _setInput(textInputElement) {
+    if (textInputElement) {
+      textInputElement.addClass('item-input');
+      if (this.displayType) {
+        textInputElement.addClass(this.displayType + '-input');
+      }
+      this.input = textInputElement;
+      this.type = textInputElement.type;
 
-  /**
-   * @private
-   */
-  registerInput(textInputElement) {
-    if (this.displayType) {
-      textInputElement.addClass(this.displayType + '-input');
+      this.hasValue(this.input.value);
+      textInputElement.valueChange.subscribe(inputValue => {
+        this.hasValue(inputValue);
+      });
+
+      this.focusChange(this.hasFocus());
+      textInputElement.focusChange.subscribe(hasFocus => {
+        this.focusChange(hasFocus);
+      });
+
+    } else {
+      console.error('<input> or <textarea> elements required within <ion-input>')
     }
-    this.input = textInputElement;
-    this.type = textInputElement.type || 'text';
   }
 
   /**
    * @private
    */
-  registerLabel(label) {
-    if (this.displayType) {
+  @ContentChild(Label)
+  set _setLabel(label) {
+    if (label && this.displayType) {
       label.addClass(this.displayType + '-label');
     }
     this.label = label;
@@ -160,24 +278,24 @@ export class TextInput {
    * @private
    */
   ngAfterViewInit() {
-    if (this.input && this.label) {
+    let self = this;
+    if (self.input && self.label) {
       // if there is an input and a label
       // then give the label an ID
       // and tell the input the ID of who it's labelled by
-      this.input.labelledBy(this.label.id);
+      self.input.labelledBy(self.label.id);
     }
 
-    let self = this;
-    self.scrollMove = (ev) => {
-      if (!(this.navCtrl && this.navCtrl.isTransitioning())) {
+    self.scrollMove = function(ev) {
+      if (!(self._nav && self._nav.isTransitioning())) {
         self.deregMove();
 
-        if (self.hasFocus) {
+        if (self.hasFocus()) {
           self.input.hideFocus(true);
-          this.scrollView.onScrollEnd(() => {
+          self._scrollView.onScrollEnd(function() {
             self.input.hideFocus(false);
 
-            if (self.hasFocus) {
+            if (self.hasFocus()) {
               self.regMove();
             }
           });
@@ -198,9 +316,9 @@ export class TextInput {
    * @private
    */
   pointerStart(ev) {
-    if (this.scrollAssist && this.app.isEnabled()) {
+    if (this._assist && this._app.isEnabled()) {
       // remember where the touchstart/mousedown started
-      this.startCoord = dom.pointerCoord(ev);
+      this.startCoord = pointerCoord(ev);
     }
   }
 
@@ -208,17 +326,17 @@ export class TextInput {
    * @private
    */
   pointerEnd(ev) {
-    if (!this.app.isEnabled()) {
+    if (!this._app.isEnabled()) {
       ev.preventDefault();
       ev.stopPropagation();
 
-    } else if (this.scrollAssist && ev.type === 'touchend') {
+    } else if (this._assist && ev.type === 'touchend') {
       // get where the touchend/mouseup ended
-      let endCoord = dom.pointerCoord(ev);
+      let endCoord = pointerCoord(ev);
 
       // focus this input if the pointer hasn't moved XX pixels
       // and the input doesn't already have focus
-      if (!dom.hasPointerMoved(8, this.startCoord, endCoord) && !this.hasFocus) {
+      if (!hasPointerMoved(8, this.startCoord, endCoord) && !this.hasFocus()) {
         ev.preventDefault();
         ev.stopPropagation();
 
@@ -243,15 +361,15 @@ export class TextInput {
   initFocus() {
     // begin the process of setting focus to the inner input element
 
-    let scrollView = this.scrollView;
+    let scrollView = this._scrollView;
 
-    if (scrollView && this.scrollAssist) {
+    if (scrollView && this._assist) {
       // this input is inside of a scroll view
 
       // find out if text input should be manually scrolled into view
-      let ele = this.elementRef.nativeElement;
+      let ele = this._elementRef.nativeElement;
 
-      let scrollData = TextInput.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getDimensions(), this.keyboardHeight, this.platform.height());
+      let scrollData = TextInput.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getDimensions(), this.keyboardHeight, this._platform.height());
       if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
         // the text input is in a safe position that doesn't require
         // it to be scrolled into view, just set focus now
@@ -266,8 +384,8 @@ export class TextInput {
       // manually scroll the text input to the top
       // do not allow any clicks while it's scrolling
       let scrollDuration = getScrollAssistDuration(scrollData.scrollAmount);
-      this.app.setEnabled(false, scrollDuration);
-      this.navCtrl && this.navCtrl.setTransitioning(true, scrollDuration);
+      this._app.setEnabled(false, scrollDuration);
+      this._nav && this._nav.setTransitioning(true, scrollDuration);
 
       // temporarily move the focus to the focus holder so the browser
       // doesn't freak out while it's trying to get the input in place
@@ -281,8 +399,8 @@ export class TextInput {
         this.input.relocate(false);
 
         // all good, allow clicks again
-        this.app.setEnabled(true);
-        this.navCtrl && this.navCtrl.setTransitioning(false);
+        this._app.setEnabled(true);
+        this._nav && this._nav.setTransitioning(false);
         this.regMove();
       });
 
@@ -296,11 +414,81 @@ export class TextInput {
 
   /**
    * @private
-   * @param {TODO} inputOffsetTop  TODO
-   * @param {TODO} inputOffsetHeight  TODO
-   * @param {TODO} scrollViewDimensions  TODO
-   * @param {TODO} keyboardHeight  TODO
-   * @returns {TODO} TODO
+   */
+  setFocus() {
+    if (this.input) {
+      this._form.setAsFocused(this);
+
+      // set focus on the actual input element
+      this.input.setFocus();
+
+      // ensure the body hasn't scrolled down
+      document.body.scrollTop = 0;
+    }
+  }
+
+  /**
+   * @private
+   */
+  regMove() {
+    if (this._assist && this._scrollView) {
+      setTimeout(() => {
+        this.deregMove();
+        this.deregScroll = this._scrollView.addScrollEventListener(this.scrollMove);
+      }, 80);
+    }
+  }
+
+  /**
+   * @private
+   */
+  deregMove() {
+    this.deregScroll && this.deregScroll();
+  }
+
+  /**
+   * @private
+   */
+  focusChange(hasFocus) {
+    this._renderer.setElementClass(this._elementRef, 'input-focused', hasFocus);
+    if (!hasFocus) {
+      this.deregMove();
+    }
+  }
+
+  /**
+   * @private
+   */
+  hasFocus() {
+    return !!this.input && this.input.hasFocus();
+  }
+
+  /**
+   * @private
+   */
+  hasValue(inputValue) {
+    let inputHasValue = !!(inputValue && inputValue !== '');
+    this._renderer.setElementClass(this._elementRef, 'input-has-value', inputHasValue);
+  }
+
+  /**
+   * @private
+   * This function is used to add the Angular css classes associated with inputs in forms
+   */
+  hasClass(className) {
+    this.input && this.input.hasClass(className);
+  }
+
+  /**
+   * @private
+   */
+  ngOnDestroy() {
+    this.deregMove();
+    this._form.deregister(this);
+  }
+
+  /**
+   * @private
    */
   static getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, plaformHeight) {
     // compute input's Y values relative to the body
@@ -416,212 +604,21 @@ export class TextInput {
     return scrollData;
   }
 
-  /**
-   * @private
-   */
-  focusChange(hasFocus) {
-    this.renderer.setElementClass(this.elementRef, 'input-focused', hasFocus);
-    if (!hasFocus) {
-      this.deregMove();
-      this.input.hideFocus(false);
-    }
-  }
-
-  /**
-   * @private
-   */
-  hasValue(inputValue) {
-    this.renderer.setElementClass(this.elementRef, 'input-has-value', inputValue && inputValue !== '');
-    this.value = inputValue;
-  }
-
-  /**
-   * @private
-   */
-  setFocus() {
-    if (this.input) {
-      this.form.setAsFocused(this);
-
-      // set focus on the actual input element
-      this.input.setFocus();
-
-      // ensure the body hasn't scrolled down
-      document.body.scrollTop = 0;
-    }
-  }
-
-  /**
-   * @private
-   */
-  regMove() {
-    if (this.scrollAssist && this.scrollView) {
-      setTimeout(() => {
-        this.deregMove();
-        this.deregScroll = this.scrollView.addScrollEventListener(this.scrollMove);
-      }, 80);
-    }
-  }
-
-  /**
-   * @private
-   */
-  deregMove() {
-    this.deregScroll && this.deregScroll();
-  }
-
-  /**
-   * @private
-   */
-  get hasFocus() {
-    return !!this.input && this.input.hasFocus;
-  }
-
-  /**
-   * @private
-   */
-  ngOnDestroy() {
-    this.deregMove();
-    this.form.deregister(this);
-  }
-
-}
-
-
-/**
- * @private
- */
-@Directive({
-  selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=week],input[type=time]',
-  inputs: ['value', 'ngModel'],
-  host: {
-    '(focus)': 'focusChange(true)',
-    '(blur)': 'focusChange(false)',
-    '(keyup)': 'onKeyup($event)'
-  }
-})
-export class TextInputElement {
-
-  constructor(
-    @Attribute('type') type: string,
-    elementRef: ElementRef,
-    renderer: Renderer,
-    @Optional() wrapper: TextInput
-  ) {
-    this.type = type;
-    this.elementRef = elementRef;
-    this.wrapper = wrapper;
-    this.renderer = renderer;
-
-    // all text inputs (textarea, input[type=text],input[type=password], etc)
-    renderer.setElementClass(elementRef, 'text-input', true);
-
-    if (wrapper) {
-      // it's within ionic's ion-input, let ion-input handle what's up
-      renderer.setElementClass(elementRef, 'item-input', true);
-      wrapper.registerInput(this);
-    }
-
-  }
-
-  ngOnInit() {
-    if (this.ngModel) this.value = this.ngModel;
-    this.wrapper && this.wrapper.hasValue(this.value);
-  }
-
-  focusChange(changed) {
-    this.wrapper && this.wrapper.focusChange(changed);
-  }
-
-  onKeyup(ev) {
-    this.wrapper && this.wrapper.hasValue(ev.target.value);
-  }
-
-  labelledBy(val) {
-    this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', val);
-  }
-
-  setFocus() {
-    this.getNativeElement().focus();
-  }
-
-  relocate(shouldRelocate, inputRelativeY) {
-    if (this._relocated !== shouldRelocate) {
-
-      let focusedInputEle = this.getNativeElement();
-      if (shouldRelocate) {
-        let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
-
-        focusedInputEle.classList.add('hide-focused-input');
-        focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
-        focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
-
-        this.wrapper.setFocus();
-
-      } else {
-        focusedInputEle.classList.remove('hide-focused-input');
-        focusedInputEle.style[dom.CSS.transform] = '';
-        let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input');
-        if (clonedInputEle) {
-          clonedInputEle.parentNode.removeChild(clonedInputEle);
-        }
-      }
-
-      this._relocated = shouldRelocate;
-    }
-  }
-
-  hideFocus(shouldHideFocus) {
-    let focusedInputEle = this.getNativeElement();
-
-    if (shouldHideFocus) {
-      let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
-
-      focusedInputEle.classList.add('hide-focused-input');
-      focusedInputEle.style[dom.CSS.transform] = 'translate3d(-9999px,0,0)';
-      focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
-
-    } else {
-      focusedInputEle.classList.remove('hide-focused-input');
-      focusedInputEle.style[dom.CSS.transform] = '';
-      let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
-      if (clonedInputEle) {
-        clonedInputEle.parentNode.removeChild(clonedInputEle);
-      }
-    }
-  }
-
-  get hasFocus() {
-    return dom.hasFocus(this.getNativeElement());
-  }
-
-  addClass(className) {
-    this.renderer.setElementClass(this.elementRef, className, true);
-  }
-
-  getNativeElement() {
-    return this.elementRef.nativeElement;
-  }
-
 }
 
 /**
  * @private
  */
 @Directive({
-  selector: '[scroll-assist]',
-  host: {
-    '(focus)': 'receivedFocus($event)'
-  }
+  selector: '[scroll-assist]'
 })
 class InputScrollAssist {
 
-  constructor(form: Form, textInput: TextInput) {
-    this.form = form;
-    this.textInput = textInput;
-  }
+  constructor(private _form: Form, private _input: TextInput) {}
 
-  receivedFocus(ev) {
-    this.form.focusNext(this.textInput);
+  @HostListener('focus')
+  receivedFocus() {
+    this._form.focusNext(this._input);
   }
 
 }
@@ -636,7 +633,6 @@ function cloneInput(srcInput, addCssClass) {
   return clonedInputEle;
 }
 
-
 const SCROLL_ASSIST_SPEED = 0.4;
 
 function getScrollAssistDuration(distanceToScroll) {