update to use host

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'
       }
     }
   }

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]

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'
       }
     }
   }

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 {

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'
   }
 })

ionic/components/nav/pane.js

@@ -139,7 +139,7 @@ class PaneContentAnchor {
 
 @Component({
   selector: 'section',
-  hostAttributes: {
+  host: {
     'class': 'navbar-container'
   }
 })

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 {

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)'
+      }
     }
   }
 

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(

ionic/components/switch/switch.js

@@ -26,8 +26,8 @@ export class Switch {
       properties: [
         'checked'
       ],
-      hostListeners: {
-        'click': 'switchClicked($event)'
+      host: {
+        '(click)': 'switchClicked($event)'
       }
     }
   }

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]
 })

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'
   }
 })