diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js
index 71b5f4e384..a250a85361 100644
--- a/ionic/components/action-menu/action-menu.js
+++ b/ionic/components/action-menu/action-menu.js
@@ -42,8 +42,8 @@ export class ActionMenu extends Overlay {
   static get config() {
     return {
       selector: 'ion-action-menu',
-      hostProperties: {
-        'zIndex': 'style.z-index'
+      host: {
+        '[style.z-index]': 'zIndex'
       }
     }
   }
diff --git a/ionic/components/icon/icon.js b/ionic/components/icon/icon.js
index 085d08b0a6..1e34ea0eb9 100644
--- a/ionic/components/icon/icon.js
+++ b/ionic/components/icon/icon.js
@@ -7,10 +7,8 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
   properties: [
     'name'
   ],
-  hostProperties: {
-    'label': 'attr.aria-label'
-  },
-  hostAttributes: {
+  host: {
+    '[attr.aria-label]': 'label'
     'role': 'img'
   },
   lifecycle: [onInit]
diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js
index 9bf5d041aa..d4a8e92b82 100644
--- a/ionic/components/modal/modal.js
+++ b/ionic/components/modal/modal.js
@@ -7,8 +7,8 @@ export class Modal extends Overlay {
   static get config() {
     return {
       selector: 'ion-modal',
-      hostProperties: {
-        'zIndex': 'style.z-index'
+      host: {
+        '[style.z-index]': 'zIndex'
       }
     }
   }
diff --git a/ionic/components/nav-bar/nav-bar.js b/ionic/components/nav-bar/nav-bar.js
index 4d39f4887d..4465a590ea 100644
--- a/ionic/components/nav-bar/nav-bar.js
+++ b/ionic/components/nav-bar/nav-bar.js
@@ -133,8 +133,8 @@ export class Navbar {
 
 @Directive({
   selector: '.back-button',
-  hostListeners: {
-    '^click': 'goBack($event)'
+  host: {
+    '(^click)': 'goBack($event)'
   }
 })
 class BackButton {
diff --git a/ionic/components/nav/nav-push.js b/ionic/components/nav/nav-push.js
index c5bcef82a7..cf60c67d70 100644
--- a/ionic/components/nav/nav-push.js
+++ b/ionic/components/nav/nav-push.js
@@ -10,14 +10,12 @@ import {NavController} from './nav-controller';
 
 @Directive({
   selector: '[nav-push]',
-  hostListeners: {
-    '^click': 'onClick($event)'
-  },
   properties: [
     'navPush',
     'pushData'
   ],
-  hostAttributes: {
+  host: {
+    '(^click)': 'onClick($event)',
     'role': 'link'
   }
 })
@@ -33,10 +31,8 @@ export class NavPush {
 
 @Directive({
   selector: '[nav-pop]',
-  hostListeners: {
-    '^click': 'onClick($event)'
-  },
-  hostAttributes: {
+  host: {
+    '(^click)': 'onClick($event)',
     'role': 'link'
   }
 })
diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js
index 09d246321f..2302b9a311 100644
--- a/ionic/components/nav/pane.js
+++ b/ionic/components/nav/pane.js
@@ -139,7 +139,7 @@ class PaneContentAnchor {
 
 @Component({
   selector: 'section',
-  hostAttributes: {
+  host: {
     'class': 'navbar-container'
   }
 })
diff --git a/ionic/components/nav/swipe-handle.js b/ionic/components/nav/swipe-handle.js
index 83a6f53e89..f8e3fa8356 100644
--- a/ionic/components/nav/swipe-handle.js
+++ b/ionic/components/nav/swipe-handle.js
@@ -10,8 +10,8 @@ import {Gesture} from 'ionic/gestures/gesture';
 
 @Directive({
   selector: '.swipe-handle',
-  hostProperties: {
-    'showHandle()': 'class.show-handle'
+  host: {
+    '[class.show-handle]': 'showHandle()'
   }
 })
 export class SwipeHandle {
diff --git a/ionic/components/radio/radio.js b/ionic/components/radio/radio.js
index d514d0d158..a8f0af42b6 100644
--- a/ionic/components/radio/radio.js
+++ b/ionic/components/radio/radio.js
@@ -109,12 +109,12 @@ export class RadioButton {
   static get config() {
     return {
       selector: 'ion-radio',
-      hostListeners: {
-        '^click': 'buttonClicked($event)'
-      },
       properties: [
         'value'
-      ]
+      ],
+      host: {
+        '(^click)': 'buttonClicked($event)'
+      }
     }
   }
 
diff --git a/ionic/components/segment/segment.js b/ionic/components/segment/segment.js
index 245f918d9d..e4d02fd03f 100644
--- a/ionic/components/segment/segment.js
+++ b/ionic/components/segment/segment.js
@@ -23,14 +23,12 @@ export class Segment {
     return {
       selector: 'ion-segment',
       appInjector: [ControlDirective],
-      hostListeners: {
-        'click': 'buttonClicked($event)'
-      },
       properties: [
         'value'
       ],
-      hostProperties: {
-        value: 'value'
+      host: {
+        '(click)': 'buttonClicked($event)',
+        '[value]': 'value'
       }
     }
   }
@@ -113,17 +111,14 @@ export class Segment {
 }
 
 
-@Component({
+@Directive({
   selector: 'ion-segment-button',
-  hostListeners: {
-    'click': 'buttonClicked($event)'
-  },
   properties: [
     'value'
-  ]
-})
-@View({
-  template: '<content></content>'
+  ],
+  host: {
+    '(click)': 'buttonClicked($event)'
+  }
 })
 export class SegmentButton {
   constructor(
diff --git a/ionic/components/switch/switch.js b/ionic/components/switch/switch.js
index 5963d1239e..4bb14245bb 100644
--- a/ionic/components/switch/switch.js
+++ b/ionic/components/switch/switch.js
@@ -26,8 +26,8 @@ export class Switch {
       properties: [
         'checked'
       ],
-      hostListeners: {
-        'click': 'switchClicked($event)'
+      host: {
+        '(click)': 'switchClicked($event)'
       }
     }
   }
diff --git a/ionic/components/tabs/tab-button.js b/ionic/components/tabs/tab-button.js
index 48e20a8dd0..0691d5297a 100644
--- a/ionic/components/tabs/tab-button.js
+++ b/ionic/components/tabs/tab-button.js
@@ -7,13 +7,11 @@ import {Tabs} from './tabs';
 @Directive({
   selector: 'button.tab-button',
   properties: ['tab'],
-  hostProperties: {
-    'btnId': 'attr.id',
-    'panelId': 'attr.aria-controls',
-    'tab.isSelected': 'attr.aria-selected'
-  },
-  hostListeners: {
-    '^click': 'onClick($event)'
+  host: {
+    '[attr.id]': 'btnId',
+    '[attr.aria-controls]': 'panelId',
+    '[attr.aria-selected]': 'tab.isSelected',
+    '(^click)': 'onClick($event)'
   },
   lifecycle: [onInit]
 })
diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js
index 8ca6ca34e1..87a1f20de9 100644
--- a/ionic/components/tabs/tab.js
+++ b/ionic/components/tabs/tab.js
@@ -20,13 +20,11 @@ import {Content} from '../content/content';
     'tabTitle',
     'tabIcon'
   ],
-  hostProperties: {
-    'panelId': 'attr.id',
-    'labeledBy': 'attr.aria-labelledby',
-    '!isSelected': 'attr.aria-hidden',
-    'isSelected': 'class.tab-selected'
-  },
-  hostAttributes: {
+  host: {
+    '[attr.id]': 'panelId',
+    '[attr.aria-labelledby]': 'labeledBy',
+    '[attr.aria-hidden]': '!isSelected',
+    '[class.tab-selected]': 'isSelected',
     'role': 'tabpanel'
   }
 })
diff --git a/ionic/config/component.js b/ionic/config/component.js
index dc27302476..87009357cf 100644
--- a/ionic/config/component.js
+++ b/ionic/config/component.js
@@ -1,4 +1,5 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {DirectiveMetadata} from 'angular2/src/render/api';
 
 import * as util from 'ionic/util';
 import {Platform} from 'ionic/platform/platform';
@@ -20,10 +21,13 @@ export class IonicComponent extends Component {
 
 function appendModeConfig(ComponentType) {
   let config = ComponentType.config;
+  config.host = config.host || {};
+
+//  let host = DirectiveMetadata.parseHostConfig(config.host);
+
   const defaultProperties = config.defaultProperties;
 
   config.properties = config.properties || [];
-  config.hostProperties = config.hostProperties || {};
 
   for (let prop in defaultProperties) {
     // add the property to the component "properties"
@@ -31,7 +35,7 @@ function appendModeConfig(ComponentType) {
 
     // set the component "hostProperties", so the instance's
     // property value will be used to set the element's attribute
-    config.hostProperties[prop] = 'attr.' + util.pascalCaseToDashCase(prop);
+    config.host['[attr.' + util.pascalCaseToDashCase(prop)] = prop;
   }
 
   // called by the component's onInit when an instance has been created and properties bound
@@ -88,10 +92,8 @@ function appendModeConfig(ComponentType) {
     };
   }
 
-  config.hostAttributes = config.hostAttributes || {};
-  let className = (config.hostAttributes['class'] || '');
   let id = config.classId || config.selector.replace('ion-', '');
-  config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim();
+  config.host['class'] = (id + ' ' + id + '-' + platformMode);
 
   return config;
 }