chore(upgrad): ng alpha52 and case-sensitive templates

ionic/components/action-sheet/action-sheet.ts

@@ -22,19 +22,19 @@ import {extend} from '../../util/util';
     '<div class="action-sheet-wrapper">' +
       '<div class="action-sheet-container">' +
         '<div class="action-sheet-group action-sheet-options">' +
-          '<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
+          '<div class="action-sheet-title" *ngIf="d.titleText">{{d.titleText}}</div>' +
-          '<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
+          '<button (click)="buttonClicked(i)" *ngFor="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
-            '<icon [name]="b.icon" *ng-if="b.icon" class="action-sheet-icon"></icon> ' +
+            '<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
-          '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
+          '<button *ngIf="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
-            '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
+            '<icon [name]="d.destructiveIcon" *ngIf="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
             '{{d.destructiveText}}' +
           '</button>' +
         '</div>' +
-        '<div class="action-sheet-group" *ng-if="d.cancelText">' +
+        '<div class="action-sheet-group" *ngIf="d.cancelText">' +
           '<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
-            '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon" class="action-sheet-icon"></icon> ' +
+            '<icon [name]="d.cancelIcon" *ngIf="d.cancelIcon" class="action-sheet-icon"></icon> ' +
             '{{d.cancelText}}' +
           '</button>' +
         '</div>' +

ionic/components/blur/blur.ts

@@ -8,7 +8,7 @@ import {Directive, Renderer, ElementRef} from 'angular2/core';
  * @demo /docs/v2/demos/blur/
  */
 @Directive({
-  selector: '[ion-blur]'
+  selector: '[blur]'
 })
 export class Blur {
   constructor(private elementRef: ElementRef, private renderer: Renderer) {

ionic/components/checkbox/checkbox.ts

@@ -14,7 +14,7 @@ import {Form} from '../../util/form';
  *
  * @usage
  * ```html
- * <ion-checkbox checked="true" value="isChecked" ng-control="htmlCtrl">
+ * <ion-checkbox checked="true" value="isChecked" ngControl="htmlCtrl">
  *   HTML5
  * </ion-checkbox>
  * ```

ionic/components/checkbox/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 
 it('should check apple, enable/check grape, submit form', function() {
-  element(by.css('[ng-control=appleCtrl] .checkbox-media')).click();
+  element(by.css('[ngControl=appleCtrl] .checkbox-media')).click();
   element(by.css('.e2eGrapeDisabled')).click();
   element(by.css('.e2eGrapeChecked')).click();
   element(by.css('.e2eSubmit')).click();

ionic/components/checkbox/test/basic/main.html

@@ -4,23 +4,23 @@
 
 <ion-content>
 
-  <form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+  <form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
 
     <ion-list>
 
-      <ion-checkbox value="apple" checked="true" ng-control="appleCtrl">
+      <ion-checkbox value="apple" checked="true" ngControl="appleCtrl">
         Apple, value=apple, init checked
       </ion-checkbox>
 
-      <ion-checkbox ng-control="bananaCtrl">
+      <ion-checkbox ngControl="bananaCtrl">
         Banana, init no checked/value attributes
       </ion-checkbox>
 
-      <ion-checkbox value="cherry" disabled="true" ng-control="cherryCtrl">
+      <ion-checkbox value="cherry" disabled="true" ngControl="cherryCtrl">
         Cherry, value=cherry, init disabled
       </ion-checkbox>
 
-      <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
+      <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl">
         Grape, value=grape, init checked, disabled
       </ion-checkbox>
 

ionic/components/icon/icon.ts

@@ -9,7 +9,7 @@ import {Config} from '../../config/config';
  * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
  * check out the [Ionicons resource docs](../../../../../resources/ionicons).
  *
- * @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
+ * @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
  * If there is not an outlined version for the particular icon, it will use the default (full) version.
  * @property {string} [ios] - Explicitly set the icon to use on iOS.
  * @property {string} [md] - Explicitly set the icon to use on Android.
@@ -55,7 +55,7 @@ export class Icon {
       // looping through native dom attributes, eww
       // https://github.com/angular/angular/issues/1818
       for (let i = 0, l = ele.attributes.length; i < l; i++) {
-        if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) {
+        if (ele.attributes[i].value === '' && /_|item-|isActive|large|small|class/.test(ele.attributes[i].name) !== true) {
           this.name = ele.attributes[i].name;
           break;
         }

ionic/components/icon/test/basic/main.html

@@ -15,16 +15,16 @@
     </ion-item>
 
     <ion-item>
-      <icon home is-active="true" item-left></icon>
+      <icon home isActive="true" item-left></icon>
       <code>
-        &lt;icon home is-active="true">&lt;/icon>
+        &lt;icon home isActive="true">&lt;/icon>
       </code>
     </ion-item>
 
     <ion-item>
-      <icon home is-active="false" item-left></icon>
+      <icon home isActive="false" item-left></icon>
       <code>
-        &lt;icon home is-active="false">&lt;/icon>
+        &lt;icon home isActive="false">&lt;/icon>
       </code>
     </ion-item>
 
@@ -57,9 +57,9 @@
     </ion-item>
 
     <ion-item>
-      <icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
+      <icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
       <code>
-        &lt;icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/icon>
+        &lt;icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/icon>
       </code>
     </ion-item>
 

ionic/components/item/item-sliding.ts

@@ -11,7 +11,7 @@ import {List} from '../list/list';
  * @usage
  * ```html
  * <ion-list>
- *   <ion-item-sliding *ng-for="#item of items">
+ *   <ion-item-sliding *ngFor="#item of items">
  *     <ion-item (click)="itemTapped(item)">
  *       {{item.title}}
  *     </ion-item>

ionic/components/item/test/groups/session-list.html

@@ -8,13 +8,13 @@
 <ion-content class="outer-content">
 
   <ion-list>
-    <ion-item-group *ng-for="#timeSlot of data">
+    <ion-item-group *ngFor="#timeSlot of data">
 
       <ion-item-divider sticky>
         {{timeSlot.time}}
       </ion-item-divider>
 
-      <ion-item-sliding *ng-for="#session of timeSlot.talks" [attr.category]="session.category" #sliding-item>
+      <ion-item-sliding *ngFor="#session of timeSlot.talks" [attr.category]="session.category" #slidingItem>
         <button ion-item (click)="openSession(session)">
           <h3>{{session.name}}</h3>
           <p>

ionic/components/item/test/sliding/main.html

@@ -35,7 +35,7 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding *ng-if="shouldShow" #item>
+    <ion-item-sliding *ngIf="shouldShow" #item>
       <ion-item text-wrap detail-push>
         <h3>Ben Sperry</h3>
         <p>
@@ -83,7 +83,7 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding *ng-for="#data of getItems()" #item>
+    <ion-item-sliding *ngFor="#data of getItems()" #item>
       <ion-item text-wrap detail-push>
         <h3>ng-for {{data}}</h3>
       </ion-item>

ionic/components/list/test/repeat-headers/main.html

@@ -2,11 +2,11 @@
 
 <ion-content class="outer-content">
   
-  <ion-list class="outer-content" *ng-for="#person of people">
+  <ion-list class="outer-content" *ngFor="#person of people">
     <ion-list-header>
       {{person.name}}
     </ion-list-header>
-    <ion-item *ng-for="#component of person.components">
+    <ion-item *ngFor="#component of person.components">
       {{component}}
       <div item-right>
         <icon pin></icon>

ionic/components/list/test/sticky/main.html

@@ -1,8 +1,8 @@
 <ion-content>
   <ion-list>
-    <ion-item-group *ng-for="#group of groups">
+    <ion-item-group *ngFor="#group of groups">
       <ion-item-divider sticky>{{group.title}}</ion-item-divider>
-      <ion-item *ng-for="#item of group.items">
+      <ion-item *ngFor="#item of group.items">
         {{item.title}}
       </ion-item>
     </ion-item-group>

ionic/components/menu/menu-close.ts

@@ -10,7 +10,7 @@ import {Menu} from './menu';
 * @see {@link ../../menu/Menu Menu API Docs}
 */
 @Directive({
-  selector: '[menu-close]',
+  selector: '[menuClose]',
   inputs: [
     'menuClose'
   ],

ionic/components/menu/menu-toggle.ts

@@ -12,14 +12,14 @@ import {Menu} from './menu';
 * @see {@link ../../menu/Menu Menu API Docs}
 */
 @Directive({
-  selector: '[menu-toggle]',
+  selector: '[menuToggle]',
   inputs: [
     'menuToggle'
   ],
   host: {
     '(click)': 'toggle()',
     '[hidden]': 'isHidden',
-    'menu-toggle': '' //ensures the attr is there for css when using [menu-toggle]
+    'menuToggle': '' //ensures the attr is there for css when using [menuToggle]
   }
 })
 export class MenuToggle {
@@ -36,7 +36,7 @@ export class MenuToggle {
 
     // Deprecation warning
     if (this.withinNavbar && elementRef.nativeElement.tagName === 'A') {
-      console.warn('Menu toggles within a navbar should use <button menu-toggle> instead of <a toggle>')
+      console.warn('Menu toggles within a navbar should use <button menuToggle> instead of <a menu-toggle>')
     }
   }
 

ionic/components/menu/menu.ts

@@ -39,8 +39,8 @@ import * as gestures from  './menu-gestures';
  * to get ahold of menu references. If no `id` is given then the menu
  * automatically receives an `id` created from the side it is on, such as
  * `leftMenu` or `rightMenu`. When using more than one menu it is always
- * recommended to give each menu a unique `id`. Additionally menu-toggle and
+ * recommended to give each menu a unique `id`. Additionally menuToggle and
- * menu-close directives should be given menu id values of their respective
+ * menuClose directives should be given menu id values of their respective
  * menu.
  *
  * Menu supports two display styles: overlay, and reveal. Overlay
@@ -59,7 +59,6 @@ import * as gestures from  './menu-gestures';
   selector: 'ion-menu',
   inputs: [
     'content',
-    'dragThreshold',
     'id',
     'side',
     'type'
@@ -189,7 +188,7 @@ export class Menu extends Ion {
    */
   setOpen(shouldOpen) {
     // _isPrevented is used to prevent unwanted opening/closing after swiping open/close
-    // or swiping open the menu while pressing down on the menu-toggle button
+    // or swiping open the menu while pressing down on the menuToggle button
     if (shouldOpen === this.isOpen || this._isPrevented()) {
       return Promise.resolve();
     }
@@ -284,7 +283,7 @@ export class Menu extends Ion {
    */
   _prevent() {
     // used to prevent unwanted opening/closing after swiping open/close
-    // or swiping open the menu while pressing down on the menu-toggle
+    // or swiping open the menu while pressing down on the menuToggle
     this._preventTime = Date.now() + 20;
   }
 
@@ -378,7 +377,7 @@ export class Menu extends Ion {
     if (menuId) {
       menu = app.getComponent(menuId);
       if (!menu) {
-        console.error('Menu with id "' + menuId + '" cannot be found for menu-toggle');
+        console.error('Menu with id "' + menuId + '" cannot be found for menuToggle');
         return;
       }
 
@@ -388,7 +387,7 @@ export class Menu extends Ion {
         menu = app.getComponent('rightMenu');
       }
       if (!menu) {
-        console.error('Menu with id "leftMenu" or "rightMenu" cannot be found for menu-toggle');
+        console.error('Menu with id "leftMenu" or "rightMenu" cannot be found for menuToggle');
         return;
       }
     }

ionic/components/menu/test/basic/e2e.ts

@@ -5,5 +5,5 @@ it('should toggle open menu', function() {
 
 
 it('should close menu', function() {
-  element(by.css('[menu-close=leftMenu]')).click();
+  element(by.css('[menuClose=leftMenu]')).click();
 });

ionic/components/menu/test/basic/main.html

@@ -8,11 +8,11 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
+      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
 
-      <button ion-item menu-close="leftMenu" detail-none>
+      <button ion-item menuClose="leftMenu" detail-none>
         Close Menu
       </button>
 
@@ -32,11 +32,11 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
+      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
 
-      <button ion-item menu-close="rightMenu" detail-none>
+      <button ion-item menuClose="rightMenu" detail-none>
         Close Menu
       </button>
 

ionic/components/menu/test/basic/page1.html

@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
     <icon menu></icon>
   </button>
 
@@ -21,7 +21,7 @@
     </button>
   </ion-buttons>
 
-  <button menu-toggle="rightMenu" right secondary>
+  <button menuToggle="rightMenu" right secondary>
     <icon menu></icon>
   </button>
 
@@ -33,11 +33,11 @@
   <h3>Page 1</h3>
 
   <p>
-    <button class="e2eContentToggleMenu" menu-toggle="leftMenu">Toggle Left Menu</button>
+    <button class="e2eContentToggleMenu" menuToggle="leftMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button class="e2eContentToggleMenu" menu-toggle="rightMenu">Toggle Right Menu</button>
+    <button class="e2eContentToggleMenu" menuToggle="rightMenu">Toggle Right Menu</button>
   </p>
 
   <ion-card>

ionic/components/menu/test/basic/page2.html

@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
     <icon menu></icon>
   </button>
 
@@ -16,7 +16,7 @@
   <h3>Page 2</h3>
 
   <p>
-    <button menu-toggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
+    <button menuToggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
   </p>
 
   <p>

ionic/components/menu/test/basic/page3.html

@@ -5,7 +5,7 @@
     Menu
   </ion-title>
 
-  <button menu-toggle="rightMenu" right>
+  <button menuToggle="rightMenu" right>
     <icon menu></icon>
   </button>
 
@@ -17,7 +17,7 @@
   <h3>Page 3</h3>
 
   <p>
-    <button menu-toggle="rightMenu">Toggle Right Menu</button>
+    <button menuToggle="rightMenu">Toggle Right Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

ionic/components/menu/test/multiple/main.html

@@ -7,7 +7,7 @@
 
   <ion-content>
     <ion-list>
-      <button ion-item menu-close="menu1" detail-none>
+      <button ion-item menuClose="menu1" detail-none>
         Close Menu 1
       </button>
     </ion-list>
@@ -24,7 +24,7 @@
 
   <ion-content>
     <ion-list>
-      <button ion-item menu-close="menu2" detail-none>
+      <button ion-item menuClose="menu2" detail-none>
         Close Menu 2
       </button>
     </ion-list>

ionic/components/menu/test/multiple/page1.html

@@ -1,6 +1,6 @@
 
 <ion-navbar *navbar>
-  <button [menu-toggle]="activeMenu">
+  <button [menuToggle]="activeMenu">
     <icon menu></icon>
   </button>
   <ion-title>
@@ -22,7 +22,7 @@
   </p>
 
   <p>
-    <button [menu-toggle]="activeMenu">Toggle Menu</button>
+    <button [menuToggle]="activeMenu">Toggle Menu</button>
   </p>
 
   <p>This page has two left menus, but only one is active at a time.</p>

ionic/components/menu/test/overlay/main.html

@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item menu-toggle="leftMenu" detail-none>
+      <button ion-item menuToggle="leftMenu" detail-none>
         Close Left Menu
       </button>
 
@@ -18,24 +18,4 @@
 </ion-menu>
 
 
-<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
-
-  <ion-toolbar secondary>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-
-    <ion-list>
-
-      <button ion-item menu-toggle="rightMenu">
-        Close Right Menu
-      </button>
-
-    </ion-list>
-  </ion-content>
-
-</ion-menu> -->
-
-
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

ionic/components/menu/test/overlay/page1.html

@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
     <icon menu></icon>
   </button>
 
@@ -17,11 +17,11 @@
   <h3>Content</h3>
 
   <p>
-    <button menu-toggle="leftMenu">Toggle Left Menu</button>
+    <button menuToggle="leftMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button menu-toggle="rightMenu">Toggle Right Menu</button>
+    <button menuToggle="rightMenu">Toggle Right Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

ionic/components/menu/test/push/main.html

@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item menu-toggle="leftMenu" detail-none>
+      <button ion-item menuToggle="leftMenu" detail-none>
         Close Left Menu
       </button>
 
@@ -18,24 +18,4 @@
 </ion-menu>
 
 
-<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
-
-  <ion-toolbar secondary>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-
-    <ion-list>
-
-      <button ion-item menu-toggle="rightMenu">
-        Close Right Menu
-      </button>
-
-    </ion-list>
-  </ion-content>
-
-</ion-menu> -->
-
-
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

ionic/components/menu/test/push/page1.html

@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
     <icon menu></icon>
   </button>
 
@@ -17,11 +17,11 @@
   <h3>Content</h3>
 
   <p>
-    <button menu-toggle="leftMenu">Toggle Left Menu</button>
+    <button menuToggle="leftMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button menu-toggle="rightMenu">Toggle Right Menu</button>
+    <button menuToggle="rightMenu">Toggle Right Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

ionic/components/menu/test/reveal/main.html

@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item menu-toggle="leftMenu" detail-none>
+      <button ion-item menuToggle="leftMenu" detail-none>
         Close Left Menu
       </button>
 
@@ -18,24 +18,4 @@
 </ion-menu>
 
 
-<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
-
-  <ion-toolbar secondary>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-
-    <ion-list>
-
-      <button ion-item menu-toggle="rightMenu">
-        Close Right Menu
-      </button>
-
-    </ion-list>
-  </ion-content>
-
-</ion-menu> -->
-
-
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

ionic/components/menu/test/reveal/page1.html

@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
     <icon menu></icon>
   </button>
 
@@ -17,11 +17,11 @@
   <h3>Content</h3>
 
   <p>
-    <button menu-toggle="leftMenu">Toggle Left Menu</button>
+    <button menuToggle="leftMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button menu-toggle="rightMenu">Toggle Right Menu</button>
+    <button menuToggle="rightMenu">Toggle Right Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

ionic/components/nav/nav-push.ts

@@ -8,11 +8,11 @@ import {NavRegistry} from './nav-registry';
  *
  * Basic usage:
  * ```html
- * <button [nav-push]="pushPage"></button>
+ * <button [navPush]="pushPage"></button>
  * ```
  * To specify parameters you can use array syntax or the `nav-params` property:
  * ```html
- * <button [nav-push]="pushPage" [nav-params]="params"></button>
+ * <button [navPush]="pushPage" [navParams]="params"></button>
  * ```
  * Where `pushPage` and `params` are specified in your component, and `pushPage`
  * contains a reference to a [@Page component](../../../config/Page/):
@@ -20,7 +20,7 @@ import {NavRegistry} from './nav-registry';
  * ```ts
  * import {LoginPage} from 'login';
  * @Page({
- *   template: `<button [nav-push]="pushPage" [nav-params]="params"></button>`
+ *   template: `<button [navPush]="pushPage" [navParams]="params"></button>`
  * })
  * class MyPage {
  *   constructor(){
@@ -34,14 +34,14 @@ import {NavRegistry} from './nav-registry';
  * You can also use syntax similar to Angular2's router, passing an array to
  * NavPush:
  * ```html
- * <button [nav-push]="[pushPage, params]"></button>
+ * <button [navPush]="[pushPage, params]"></button>
  * ```
  * @demo /docs/v2/demos/nav-push-pop/
  * @see {@link /docs/v2/components#navigation Navigation Component Docs}
  * @see {@link ../NavPop NavPop API Docs}
  */
 @Directive({
-  selector: '[nav-push]',
+  selector: '[navPush]',
   inputs: [
     'instruction: navPush',
     'params: navParams'
@@ -69,7 +69,7 @@ export class NavPush {
 
     if (this.instruction instanceof Array) {
       if (this.instruction.length > 2) {
-        throw 'Too many [nav-push] arguments, expects [View, { params }]'
+        throw 'Too many [navPush] arguments, expects [View, { params }]'
       }
       destination = this.instruction[0];
       params = this.instruction[1] || this.params;

ionic/components/nav/nav.ts

@@ -103,9 +103,9 @@ import {ViewController} from './view-controller';
   inputs: [
     'root'
   ],
-  defaultInputs: {
+  // defaultInputs: {
-    'swipeBackEnabled': true
+  //   'swipeBackEnabled': true
-  },
+  // },
   template: '<template #contents></template>'
 })
 export class Nav extends NavController {

ionic/components/nav/test/basic/index.ts

@@ -32,16 +32,16 @@ class MyCmpTest{}
         <button ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</button>
         <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
         <button ion-item (click)="pushAnother()">Push to AnotherPage</button>
-        <button ion-item [nav-push]="[pushPage, {id: 42}]">Push FullPage w/ [nav-push] array</button>
+        <button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
-        <button ion-item [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params]</button>
+        <button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
-        <button ion-item [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name</button>
+        <button ion-item [navPush]="[\'FirstPage\', {id: 22}]">Push w/ [navPush] array and string view name</button>
-        <button ion-item nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params]</button>
+        <button ion-item [navPush]="FirstPage" [navParams]="{id: 23}">Push w/ [navPush] and [navParams]</button>
         <button ion-item (click)="setPages()">setPages() (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="setRoot()">setRoot(PrimaryHeaderPage) (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="nav.pop()">Pop</button>
         <button ion-item (click)="reload()">Reload</button>
 
-        <button *ng-for="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
+        <button *ngFor="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
       </ion-list>
       <my-cmp></my-cmp>
     </ion-content>`,
@@ -195,17 +195,17 @@ class PrimaryHeaderPage {
 
 @Page({
   template: `
-    <ion-navbar *navbar hide-back-button>
+    <ion-navbar *navbar hideBackButton>
       <ion-title>Another Page Header</ion-title>
     </ion-navbar>
     <ion-content padding>
-      <p>Back button hidden w/ <code>ion-navbar hide-back-button</code></p>
+      <p>Back button hidden w/ <code>ion-navbar hideBackButton</code></p>
       <p><button (click)="nav.pop()">Pop</button></p>
       <p><button (click)="pushFullPage()">Push to FullPage</button></p>
       <p><button (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button></p>
       <p><button (click)="pushFirstPage()">Push to FirstPage</button></p>
       <p><button (click)="setRoot()">setRoot(FirstPage)</button></p>
-      <p><button (click)="toggleBackButton()">Toggle hide-back-button</button></p>
+      <p><button (click)="toggleBackButton()">Toggle hideBackButton</button></p>
       <p><button (click)="setBackButtonText()">Set Back Button Text</button></p>
     </ion-content>
   `

ionic/components/nav/test/nested/index.ts

@@ -75,7 +75,7 @@ export class Account {
 @Page({
   template: `
     <ion-navbar *navbar primary>
-      <button menu-toggle>
+      <button menuToggle>
         <icon menu></icon>
       </button>
       <ion-title>Account Dashboard</ion-title>
@@ -106,7 +106,7 @@ export class Dashboard {
 @Page({
   template: `
     <ion-navbar *navbar danger>
-      <button menu-toggle>
+      <button menuToggle>
         <icon menu></icon>
       </button>
       <ion-title>Account Profile</ion-title>

ionic/components/nav/test/routing/view1.html

@@ -1,6 +1,6 @@
 
 <ion-navbar *navbar>
-  <button menu-toggle>
+  <button menuToggle>
     <icon menu></icon>
   </button>
   <ion-title>First View</ion-title>

ionic/components/navbar/navbar.ts

@@ -71,7 +71,7 @@ class ToolbarBackground {
         '<span class="back-default">{{bbText}}</span>' +
       '</span>' +
     '</button>' +
-    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
     '<ng-content select="ion-buttons[start]"></ng-content>' +
     '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +

ionic/components/popup/popup.ts

@@ -274,15 +274,15 @@ const OVERLAY_TYPE = 'popup';
     '<div (click)="cancel($event)" tappable disable-activated class="backdrop"></div>' +
     '<div class="popup-wrapper">' +
       '<div class="popup-head">' +
-        '<h2 class="popup-title" [inner-html]="d.title" *ng-if="d.title"></h2>' +
+        '<h2 class="popup-title" [innerHTML]="d.title" *ngIf="d.title"></h2>' +
-        '<h3 class="popup-sub-title" [inner-html]="d.subTitle" *ng-if="d.subTitle"></h3>' +
+        '<h3 class="popup-sub-title" [innerHTML]="d.subTitle" *ngIf="d.subTitle"></h3>' +
       '</div>' +
       '<div class="popup-body">' +
-        '<div [inner-html]="d.template" *ng-if="d.template"></div>' +
+        '<div [innerHTML]="d.template" *ngIf="d.template"></div>' +
-        '<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ng-if="d.showPrompt" class="prompt-input">' +
+        '<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ngIf="d.showPrompt" class="prompt-input">' +
       '</div>' +
-      '<div class="popup-buttons" *ng-if="d.buttons.length">' +
+      '<div class="popup-buttons" *ngIf="d.buttons.length">' +
-        '<button clear *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text" class="popup-button"></button>' +
+        '<button clear *ngFor="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [innerHTML]="btn.text" class="popup-button"></button>' +
       '</div>' +
     '</div>',
   host: {

ionic/components/radio/radio.ts

@@ -17,7 +17,7 @@ import {ListHeader} from '../list/list';
  *
  * @usage
  * ```html
- * <ion-list radio-group ng-control="clientside">
+ * <ion-list radio-group ngControl="clientside">
  *
  *   <ion-list-header>
  *     Clientside

ionic/components/radio/test/basic/main.html

@@ -4,9 +4,9 @@
 
 <ion-content>
 
-  <form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+  <form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
 
-    <ion-list radio-group ng-control="fruits">
+    <ion-list radio-group ngControl="fruits">
 
       <ion-list-header>
         Fruits
@@ -43,12 +43,12 @@
     <code><b>fruits.value:</b> {{fruitsForm.controls.fruits.value}}</code><br>
   </div>
 
-  <form (submit)="doSubmit($event)" [ng-form-model]="currencyForm">
+  <form (submit)="doSubmit($event)" [ngFormModel]="currencyForm">
-    <ion-list radio-group ng-control="currenciesControl">
+    <ion-list radio-group ngControl="currenciesControl">
       <ion-list-header>
         Currencies
       </ion-list-header>
-      <ion-radio *ng-for="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
+      <ion-radio *ngFor="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
     </ion-list>
   </form>
 
@@ -56,7 +56,7 @@
     <code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
   </div>
 
-  <ion-list radio-group [(ng-model)]="relationship">
+  <ion-list radio-group [(ngModel)]="relationship">
     <ion-radio value="friends">Friends</ion-radio>
     <ion-radio value="enemies">Enemies</ion-radio>
   </ion-list>

ionic/components/scroll/pull-to-refresh.ts

@@ -55,13 +55,13 @@ import {raf, ready, CSS} from '../../util/dom';
   template:
     '<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">' +
       '<div class="icon-pulling">' +
-        '<i class="icon" [ng-class]="pullingIcon"></i>' +
+        '<i class="icon" [ngClass]="pullingIcon"></i>' +
       '</div>' +
-      '<div class="text-pulling" [inner-html]="pullingText" *ng-if="pullingText"></div>' +
+      '<div class="text-pulling" [innerHTML]="pullingText" *ngIf="pullingText"></div>' +
       '<div class="icon-refreshing">' +
-        '<i class="icon" [ng-class]="refreshingIcon"></i>' +
+        '<i class="icon" [ngClass]="refreshingIcon"></i>' +
       '</div>' +
-      '<div class="text-refreshing" [inner-html]="refreshingText" *ng-if="refreshingText"></div>' +
+      '<div class="text-refreshing" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>' +
     '</div>',
   directives: [NgIf, NgClass]
 })

ionic/components/searchbar/searchbar.ts

@@ -15,13 +15,13 @@ import {Button} from '../button/button';
  *
  * @usage
  * ```html
- * <ion-searchbar [(ng-model)]="defaultSearch"></ion-searchbar>
+ * <ion-searchbar [(ngModel)]="defaultSearch"></ion-searchbar>
  * ```
  *
  * @property [placeholder] - sets input placeholder to value passed in
- * @property [show-cancel] - shows the cancel button based on boolean value passed in
+ * @property [showCancel] - shows the cancel button based on boolean value passed in
- * @property [cancel-text] - sets the cancel button text to the value passed in
+ * @property [cancelText] - sets the cancel button text to the value passed in
- * @property [cancel-action] - the function that gets called by clicking the cancel button
+ * @property [cancelAction] - the function that gets called by clicking the cancel button
  * @see {@link /docs/v2/components#search Search Component Docs}
  */
 @ConfigComponent({
@@ -42,9 +42,9 @@ import {Button} from '../button/button';
       '<div class="searchbar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
-      '<button clear *ng-if="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
+      '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button clear *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
+    '<button clear *ngIf="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
 })
 export class Searchbar extends Ion {

ionic/components/searchbar/test/basic/index.ts

@@ -1,47 +0,0 @@
-import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
-
-import {App} from 'ionic/ionic';
-import {SearchPipe} from 'ionic/components/searchbar/searchbar';
-
-
-function randomTitle() {
-  var items = ['Soylent', 'Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Turkey', 'Kabob', 'Salad', 'Fruit bowl', 'Fish Tacos', 'Chimichongas', 'Meatloaf'];
-  return items[Math.floor(Math.random() * items.length)];
-}
-
-@App({
-  templateUrl: 'main.html',
-  providers: [NgControl],
-  directives: [FORM_DIRECTIVES]
-})
-class E2EApp {
-  constructor() {
-    var fb = new FormBuilder();
-    this.searchQuery = '';
-
-    this.items = []
-    for(let i = 0; i < 100; i++) {
-      this.items.push({
-        title: randomTitle()
-      })
-    }
-  }
-
-  doThis() {
-    console.log('Doing this');
-  }
-
-  getItems() {
-    var q = this.searchQuery;
-    console.log('Its changing');
-    if(q.trim() == '') {
-      return this.items;
-    }
-    return this.items.filter((v) => {
-      if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
-        return true;
-      }
-      return false;
-    })
-  }
-}

ionic/components/searchbar/test/basic/main.html

@@ -1,16 +0,0 @@
-
-<!-- <ion-view nav-title="Search Bar"> -->
-
-  <ion-content>
-    <!-- <form [ng-form-model]="form">  -->
-
-      <ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
-      <ion-list inset #list>
-        <ion-item-sliding *ng-for="#item of getItems()" (click)="doThis">
-          {{item.title}}
-        </ion-item>
-      </ion-list>
-    <!-- </form> -->
-  </ion-content>
-
-<!-- </ion-view> -->

ionic/components/searchbar/test/floating/main.html

@@ -1,20 +1,20 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default </h5>
-  <ion-searchbar [(ng-model)]="defaultSearch" (input)="triggerInput()" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput()" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-searchbar [(ng-model)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Default Cancel Button </h5>
-  <ion-searchbar [(ng-model)]="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultCancel" showCancel="true" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancel" showCancel="true" cancelText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Action</h5>
-  <ion-searchbar [(ng-model)]="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancelAction" showCancel="true" cancelText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
 
-  <div *ng-if="clickedCustomAction">
+  <div *ngIf="clickedCustomAction">
     Clicked custom action with input = {{customCancelAction}}
   </div>
 </ion-content>

ionic/components/searchbar/test/model/main.html

@@ -2,11 +2,11 @@
 <!-- <ion-view nav-title="Search Bar"> -->
 
   <ion-content>
-    <!-- <form [ng-form-model]="form"> -->
+    <!-- <form [ngFormModel]="form"> -->
 
-      <ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
+      <ion-searchbar [(ngModel)]="searchQuery"></ion-searchbar>
       <ion-list inset #list>
-        <ion-item *ng-for="#item of getItems()">
+        <ion-item *ngFor="#item of getItems()">
           {{item.title}}
         </ion-item>
       </ion-list>

ionic/components/searchbar/test/toolbar/main.html

@@ -5,22 +5,22 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default Toolbar </h5>
   <ion-toolbar>
-    <ion-searchbar [(ng-model)]="defaultToolbarSearch" show-cancel="true" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="defaultToolbarSearch" showCancel="true" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Primary Toolbar </h5>
   <ion-toolbar primary>
-    <ion-searchbar [(ng-model)]="primaryToolbarSearch" show-cancel="true" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="primaryToolbarSearch" showCancel="true" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Danger Toolbar </h5>
   <ion-toolbar danger>
-    <ion-searchbar [(ng-model)]="dangerToolbarSearch" show-cancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="dangerToolbarSearch" showCancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Light Toolbar </h5>
   <ion-toolbar light>
-    <ion-searchbar [(ng-model)]="lightToolbarSearch" show-cancel="true" class="e2eLightToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancel="true" class="e2eLightToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
 </ion-content>

ionic/components/segment/segment.ts

@@ -10,12 +10,12 @@ import {Config} from '../../config/config';
  * @description
  * A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls.
  * Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.
- * You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
+ * You could use Angular 2's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
  *
  *
  * @usage
  * ```html
- * <ion-segment [(ng-model)]="relationship" danger>
+ * <ion-segment [(ngModel)]="relationship" danger>
  *   <ion-segment-button value="friends">
  *     Friends
  *   </ion-segment-button>
@@ -28,8 +28,8 @@ import {Config} from '../../config/config';
  * Or with `FormBuilder`
  *
  *```html
- * <form [ng-form-model]="myForm">
+ * <form [ngFormModel]="myForm">
- *   <ion-segment ng-control="mapStyle" danger>
+ *   <ion-segment ngControl="mapStyle" danger>
  *     <ion-segment-button value="standard">
  *       Standard
  *     </ion-segment-button>
@@ -142,7 +142,7 @@ export class Segment extends Ion {
  * @property {string} [value] - the value of the segment-button.
  * @usage
  * ```html
- * <ion-segment [(ng-model)]="relationship" primary>
+ * <ion-segment [(ngModel)]="relationship" primary>
  *   <ion-segment-button value="friends">
  *     Friends
  *   </ion-segment-button>
@@ -155,8 +155,8 @@ export class Segment extends Ion {
  * Or with `FormBuilder`
  *
  *```html
- * <form [ng-form-model]="myForm">
+ * <form [ngFormModel]="myForm">
- *   <ion-segment ng-control="mapStyle" danger>
+ *   <ion-segment ngControl="mapStyle" danger>
  *     <ion-segment-button value="standard">
  *       Standard
  *     </ion-segment-button>

ionic/components/segment/test/basic/main.html

@@ -1,5 +1,5 @@
 <ion-toolbar>
-  <ion-segment [(ng-model)]="relationship">
+  <ion-segment [(ngModel)]="relationship">
     <ion-segment-button value="friends" class="e2eSegmentFriends">
       Friends
     </ion-segment-button>
@@ -30,8 +30,8 @@
 
   <h4>Map mode: NgControl</h4>
 
-  <form (submit)="doSubmit($event)" [ng-form-model]="myForm">
+  <form (submit)="doSubmit($event)" [ngFormModel]="myForm">
-    <ion-segment ng-control="mapStyle" danger>
+    <ion-segment ngControl="mapStyle" danger>
       <ion-segment-button value="standard" class="e2eSegmentStandard">
         Standard
       </ion-segment-button>
@@ -47,14 +47,14 @@
   <p>
     Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
 
-    <span [ng-switch]="myForm.controls.mapStyle.value">
+    <span [ngSwitch]="myForm.controls.mapStyle.value">
-      <span *ng-switch-when="'standard'">
+      <span *ngSwitchWhen="'standard'">
         <b>Standard</b>
       </span>
-      <span *ng-switch-when="'hybrid'">
+      <span *ngSwitchWhen="'hybrid'">
         <b>Hybrid</b>
       </span>
-      <span *ng-switch-when="'sat'">
+      <span *ngSwitchWhen="'sat'">
         <b>Satellite</b>
       </span>
     </span>
@@ -64,7 +64,7 @@
 
   <h4>Model style: NgModel</h4>
 
-  <ion-segment [(ng-model)]="modelStyle" dark>
+  <ion-segment [(ngModel)]="modelStyle" dark>
     <ion-segment-button value="A">
       Model A
     </ion-segment-button>
@@ -83,7 +83,7 @@
 </ion-content>
 
 <ion-toolbar position="bottom" primary>
-  <ion-segment [(ng-model)]="appType" light>
+  <ion-segment [(ngModel)]="appType" light>
     <ion-segment-button value="paid">
       Primary
     </ion-segment-button>
@@ -97,7 +97,7 @@
 </ion-toolbar>
 
 <ion-toolbar position="bottom">
-  <ion-segment [(ng-model)]="appType" danger>
+  <ion-segment [(ngModel)]="appType" danger>
     <ion-segment-button value="paid">
       Light
     </ion-segment-button>
@@ -111,7 +111,7 @@
 </ion-toolbar>
 
 <ion-toolbar position="bottom">
-  <ion-segment [(ng-model)]="appType" dark>
+  <ion-segment [(ngModel)]="appType" dark>
     <ion-segment-button value="paid">
       Light
     </ion-segment-button>

ionic/components/segment/test/nav/main.html

@@ -5,7 +5,7 @@
 </ion-navbar>
 
 <ion-toolbar>
-  <ion-segment [(ng-model)]="signInType">
+  <ion-segment [(ngModel)]="signInType">
     <ion-segment-button value="new">
       New
     </ion-segment-button>
@@ -32,14 +32,14 @@
     </ion-col>
   </ion-row>
 
-  <div [ng-switch]="signInType">
+  <div [ngSwitch]="signInType">
-    <div *ng-switch-when="'existing'">
+    <div *ngSwitchWhen="'existing'">
       Signing up as an <b>Existing User</b>.
     </div>
-    <div *ng-switch-when="'new'">
+    <div *ngSwitchWhen="'new'">
       Signing up as a <b>New User</b>.
     </div>
-    <div *ng-switch-when="'test'">
+    <div *ngSwitchWhen="'test'">
       Signing up as a <b>Test User</b>.
     </div>
  </div>

ionic/components/show-hide-when/show-hide-when.ts

@@ -3,7 +3,10 @@ import {Directive, Attribute, NgZone} from 'angular2/core'
 import {Platform} from '../../platform/platform';
 
 
-export class DisplayWhen {
+/**
+ * @private
+ */
+class DisplayWhen {
 
   constructor(conditions, platform, ngZone) {
     this.isMatch = false;
@@ -58,13 +61,13 @@ export class DisplayWhen {
  * Complements the [hide-when attribute](../HideWhen).
  * @usage
  * ```html
- * <div show-when="ios">I am only visible on iOS!</div>
+ * <div showWhen="ios">I am only visible on iOS!</div>
  * ```
  * @demo /docs/v2/demos/show-when/
  * @see {@link ../HideWhen HideWhen API Docs}
  */
 @Directive({
-  selector: '[show-when]',
+  selector: '[showWhen]',
   host: {
     '[hidden]': 'hidden'
   }
@@ -72,7 +75,7 @@ export class DisplayWhen {
 export class ShowWhen extends DisplayWhen {
 
   constructor(
-    @Attribute('show-when') showWhen: string,
+    @Attribute('showWhen') showWhen: string,
     platform: Platform,
     ngZone: NgZone
   ) {
@@ -95,13 +98,13 @@ export class ShowWhen extends DisplayWhen {
  * Complements the [show-when attribute](../ShowWhen).
  * @usage
  * ```html
- * <div hide-when="android">I am hidden on Android!</div>
+ * <div hideWhen="android">I am hidden on Android!</div>
  * ```
  * @demo /docs/v2/demos/hide-when/
  * @see {@link ../ShowWhen ShowWhen API Docs}
  */
 @Directive({
-  selector: '[hide-when]',
+  selector: '[hideWhen]',
   host: {
     '[hidden]': 'hidden'
   }
@@ -109,7 +112,7 @@ export class ShowWhen extends DisplayWhen {
 export class HideWhen extends DisplayWhen {
 
   constructor(
-    @Attribute('hide-when') hideWhen: string,
+    @Attribute('hideWhen') hideWhen: string,
     platform: Platform,
     ngZone: NgZone
   ) {

ionic/components/show-hide-when/test/basic/main.html

@@ -4,56 +4,56 @@
 
 <ion-content padding>
 
-  <p show-when="ios" style="background:blue; color:white">
+  <p showWhen="ios" style="background:blue; color:white">
-    show-when="ios"
+    showWhen="ios"
   </p>
 
-  <p show-when="android" style="background:green; color:white">
+  <p showWhen="android" style="background:green; color:white">
-    show-when="android"
+    showWhen="android"
   </p>
 
-  <p show-when="android,ios" style="background:yellow;">
+  <p showWhen="android,ios" style="background:yellow;">
-    show-when="android,ios"
+    showWhen="android,ios"
   </p>
 
-  <p show-when="core" style="background:#ddd;">
+  <p showWhen="core" style="background:#ddd;">
-    show-when="core"
+    showWhen="core"
   </p>
 
-  <p show-when="mobile" style="background:orange;">
+  <p showWhen="mobile" style="background:orange;">
-    show-when="mobile"
+    showWhen="mobile"
   </p>
 
-  <p show-when="phablet" style="background:red;">
+  <p showWhen="phablet" style="background:red;">
-    show-when="phablet"
+    showWhen="phablet"
   </p>
 
-  <p show-when="tablet" style="background:black;color:white">
+  <p showWhen="tablet" style="background:black;color:white">
-    show-when="tablet"
+    showWhen="tablet"
   </p>
 
-  <p show-when="iphone" style="background:purple; color:white;">
+  <p showWhen="iphone" style="background:purple; color:white;">
-    show-when="iphone"
+    showWhen="iphone"
   </p>
 
-  <p show-when="landscape" style="background:pink;">
+  <p showWhen="landscape" style="background:pink;">
-    show-when="landscape"
+    showWhen="landscape"
   </p>
 
-  <p show-when="portrait" style="background:maroon; color:white;">
+  <p showWhen="portrait" style="background:maroon; color:white;">
-    show-when="portrait"
+    showWhen="portrait"
   </p>
 
-  <p hide-when="ios" style="background:blue; color:white">
+  <p hideWhen="ios" style="background:blue; color:white">
-    hide-when="ios"
+    hideWhen="ios"
   </p>
 
-  <p hide-when="android" style="background:green; color:white">
+  <p hideWhen="android" style="background:green; color:white">
-    hide-when="android"
+    hideWhen="android"
   </p>
 
-  <p hide-when="android,ios" style="background:yellow;">
+  <p hideWhen="android,ios" style="background:yellow;">
-    hide-when="android,ios"
+    hideWhen="android,ios"
   </p>
 
 </ion-content>

ionic/components/slides/slides.ts

@@ -34,7 +34,7 @@ import {Scroll} from '../scroll/scroll';
  * ```ts
  * @Page({
  *  template: `
- *     <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
+ *     <ion-slides pager (slideChanged)="onSlideChanged($event)" loop="true" autoplay="true">
  *      <ion-slide>
  *        <h3>Thank you for choosing the Awesome App!</h3>
  *        <p>

ionic/components/slides/test/basic/main.html

@@ -1,5 +1,5 @@
 <ion-slides [options]="extraOptions" id="slider" style="background-color: black" zoom>
-  <ion-slide *ng-for="#image of images">
+  <ion-slide *ngFor="#image of images">
     <img data-src="{{getImageUrl(image)}}" slide-lazy>
   </ion-slide>
 </ion-slides>

ionic/components/slides/test/intro/main.html

@@ -42,7 +42,7 @@
   </ion-buttons>
   <ion-title>Grid Icons</ion-title>
 </ion-navbar>
-<ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
+<ion-slides pager (slideChanged)="onSlideChanged($event)" loop="true" autoplay="true">
   <ion-slide>
     <h3>Thank you for choosing the Awesome App!</h3>
     <div id="logo">

ionic/components/slides/test/scroll/main.html

@@ -12,7 +12,7 @@
     </ion-slides>
   </div>
   <ion-list>
-    <button ion-item *ng-for="#item of [0,1,2,3,4,5,6,7,8]">
+    <button ion-item *ngFor="#item of [0,1,2,3,4,5,6,7,8]">
       {{ item }}
     </button>
   </ion-list>

ionic/components/tabs/tab.ts

@@ -13,8 +13,8 @@ import {Tabs} from './tabs';
  * @usage
  * ```html
  * <ion-tabs>
- * 	 <ion-tab tab-title="Home" tab-icon="home" [root]="tabOneRoot"></ion-tab>
+ * 	 <ion-tab tabTitle="Home" tabIcon="home" [root]="tabOneRoot"></ion-tab>
- * 	 <ion-tab tab-title="Login" tab-icon="star" [root]="tabTwoRoot"></ion-tab>
+ * 	 <ion-tab tabTitle="Login" tabIcon="star" [root]="tabTwoRoot"></ion-tab>
  * </ion-tabs>
  * ```
  *
@@ -34,8 +34,8 @@ import {Tabs} from './tabs';
 
  *
  * @property {any} [root] - set the root page for this tab
- * @property {any} [tab-title] - set the title of this tab
+ * @property {any} [tabTitle] - set the title of this tab
- * @property {any} [tab-icon] - set the icon for this tab
+ * @property {any} [tabIcon] - set the icon for this tab
 
  */
 @Component({

ionic/components/tabs/tabs.ios.scss

@@ -21,7 +21,7 @@ tabbar {
   background: $tabbar-ios-background;
 }
 
-ion-tabs[tabbar-placement=top] tabbar {
+ion-tabs[tabbarPlacement=top] tabbar {
   border-top: none;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
@@ -60,8 +60,8 @@ ion-tabs[tabbar-placement=top] tabbar {
   }
 }
 
-[tabbar-icons=right] .tab-button,
+[tabbarIcons=right] .tab-button,
-[tabbar-icons=left] .tab-button {
+[tabbarIcons=left] .tab-button {
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -77,7 +77,7 @@ ion-tabs[tabbar-placement=top] tabbar {
   }
 }
 
-[tabbar-icons=hide] .tab-button-text {
+[tabbarIcons=hide] .tab-button-text {
   font-size: 1.4rem;
   line-height: 1.1;
 }
@@ -101,7 +101,7 @@ ion-tabs[tabbar-placement=top] tabbar {
     border-top-width: 0.55px;
   }
 
-  &[tabbar-placement="top"] tabbar {
+  &[tabbarPlacement="top"] tabbar {
     border-bottom-width: 0.55px;
   }
 

ionic/components/tabs/tabs.md.scss

@@ -49,13 +49,13 @@ tabbar {
   min-width: $tabbar-md-item-icon-size + 5;
 }
 
-[tabbar-icons=bottom] .tab-button {
+[tabbarIcons=bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tabbar-icons=right] .tab-button,
+[tabbarIcons=right] .tab-button,
-[tabbar-icons=left] .tab-button {
+[tabbarIcons=left] .tab-button {
   padding-bottom: 10px;
 
   icon {
@@ -84,7 +84,7 @@ tab-highlight {
   }
 }
 
-[tabbar-placement=bottom] tab-highlight {
+[tabbarPlacement=bottom] tab-highlight {
   top: 0;
 }
 

ionic/components/tabs/tabs.scss

@@ -43,7 +43,7 @@ ion-tabbar-section {
   order: $flex-order-tabbar-bottom;
 }
 
-[tabbar-placement=top] ion-tabbar-section {
+[tabbarPlacement=top] ion-tabbar-section {
   order: $flex-order-tabbar-top;
 }
 
@@ -108,13 +108,13 @@ tab-highlight {
   display: none;
 }
 
-[tabbar-icons=bottom] .tab-button {
+[tabbarIcons=bottom] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tabbar-icons=left] .tab-button {
+[tabbarIcons=left] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -123,7 +123,7 @@ tab-highlight {
   }
 }
 
-[tabbar-icons=right] .tab-button {
+[tabbarIcons=right] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -133,6 +133,6 @@ tab-highlight {
   }
 }
 
-[tabbar-icons=hide] .tab-button-icon {
+[tabbarIcons=hide] .tab-button-icon {
   display: none;
 }

ionic/components/tabs/tabs.ts

@@ -14,10 +14,10 @@ import {rafFrames} from '../../util/dom';
 
 /**
  * @name Tabs
- * @property {any} [tabbar-placement] - set position of the tabbar, top or bottom
+ * @property {any} [tabbarPlacement] - set position of the tabbar, top or bottom
- * @property {any} [tabbar-icons] - set the position of the tabbar's icons: top, bottom, left, right, hide
+ * @property {any} [tabbarIcons] - set the position of the tabbar's icons: top, bottom, left, right, hide
  * @property {any} [tabbar-style] - sets tabbar's style (primary, secondary, etc)
- * @property {any} [preload-tabs] - sets whether to preload all the tabs, true or false
+ * @property {any} [preloadTabs] - sets whether to preload all the tabs, true or false
  * @usage
 * ```html
  * <ion-tabs>
@@ -48,8 +48,8 @@ import {rafFrames} from '../../util/dom';
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
       '<tabbar role="tablist">' +
-        '<a *ng-for="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
+        '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
-          '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
+          '<icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
         '</a>' +
         '<tab-highlight></tab-highlight>' +

ionic/components/tabs/test/advanced/tabs.html

@@ -1,6 +1,6 @@
 
-<ion-tabs preload-tabs="false">
+<ion-tabs preloadTabs="false">
-  <ion-tab tab-title="Recents" tab-icon="call" [root]="tab1Root"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root"></ion-tab>
-  <ion-tab tab-title="Favorites" tab-icon="star" [root]="tab2Root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
-  <ion-tab tab-title="Settings" tab-icon="settings" [root]="tab3Root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
 </ion-tabs>

ionic/components/tabs/test/basic/index.ts

@@ -13,7 +13,7 @@
         <ion-list-header>
           Tab 1
         </ion-list-header>
-        <ion-item *ng-for="#i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+        <ion-item *ngFor="#i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
       </ion-list>
     </ion-content>
     `
@@ -39,7 +39,7 @@ class Tab1 {
     </ion-navbar>
     <ion-content>
       <ion-list>
-        <ion-item-sliding *ng-for="#session of sessions" #sliding-item>
+        <ion-item-sliding *ngFor="#session of sessions" #slidingItem>
           <ion-item>
             <h3>{{session.name}} {{session.name}} {{session.name}}</h3>
             <p>{{session.location}} {{session.location}} {{session.location}}</p>
@@ -71,7 +71,7 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <button menu-toggle>
+      <button menuToggle>
         <icon menu></icon>
       </button>
       <ion-title>Stopwatch</ion-title>
@@ -92,7 +92,7 @@ class Tab3 {}
       </ion-toolbar>
       <ion-content>
         <ion-list>
-          <button ion-item menu-close detail-none>
+          <button ion-item menuClose detail-none>
             Close Menu
           </button>
         </ion-list>
@@ -100,9 +100,9 @@ class Tab3 {}
     </ion-menu>
 
     <ion-tabs #content>
-      <ion-tab tab-title="Plain List" tab-icon="star" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
-      <ion-tab tab-title="Schedule" tab-icon="globe" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
-      <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
+      <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
   `
 })

ionic/components/tabs/test/ghost/index.ts

@@ -46,7 +46,7 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <button menu-toggle>
+      <button menuToggle>
         <icon menu></icon>
       </button>
       <ion-title>Stopwatch</ion-title>
@@ -68,7 +68,7 @@ class Tab3 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <button menu-toggle>
+      <button menuToggle>
         <icon menu></icon>
       </button>
       <ion-title>Quesarito</ion-title>
@@ -92,7 +92,7 @@ class QuesaritoPage {
       </ion-toolbar>
       <ion-content>
         <ion-list>
-          <button ion-item menu-close detail-none (click)="openPage('quesarito')">
+          <button ion-item menuClose detail-none (click)="openPage('quesarito')">
             Quesarito
           </button>
         </ion-list>
@@ -100,9 +100,9 @@ class QuesaritoPage {
     </ion-menu>
 
     <ion-tabs #content>
-      <ion-tab tab-title="Heart" tab-icon="heart" [root]="root1" #tab1></ion-tab>
+      <ion-tab tabTitle="Heart" tabIcon="heart" [root]="root1" #tab1></ion-tab>
-      <ion-tab tab-title="Star" tab-icon="star" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Star" tabIcon="star" [root]="root2"></ion-tab>
-      <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
+      <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
   `
 })

ionic/components/tabs/test/tab-bar-scenarios/main.html

@@ -1,69 +1,69 @@
 
 <!-- Text -->
 <ion-tabs no-navbar>
-  <ion-tab tab-title="Recents"></ion-tab>
+  <ion-tab tabTitle="Recents"></ion-tab>
-  <ion-tab tab-title="Favorites"></ion-tab>
+  <ion-tab tabTitle="Favorites"></ion-tab>
-  <ion-tab tab-title="Settings"></ion-tab>
+  <ion-tab tabTitle="Settings"></ion-tab>
 </ion-tabs>
 
 
 <!-- Icons -->
 <ion-tabs no-navbar>
-  <ion-tab tab-icon="call"></ion-tab>
+  <ion-tab tabIcon="call"></ion-tab>
-  <ion-tab tab-icon="heart"></ion-tab>
+  <ion-tab tabIcon="heart"></ion-tab>
-  <ion-tab tab-icon="settings"></ion-tab>
+  <ion-tab tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 
 <!-- Icons on top of text -->
 <ion-tabs no-navbar>
-  <ion-tab tab-title="Location" tab-icon="navigate"></ion-tab>
+  <ion-tab tabTitle="Location" tabIcon="navigate"></ion-tab>
-  <ion-tab tab-title="Favorites" tab-icon="star"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab>
-  <ion-tab tab-title="Radio" tab-icon="musical-notes"></ion-tab>
+  <ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab>
 </ion-tabs>
 
 
 <!-- Icons below text -->
-<ion-tabs tabbar-icons="bottom" no-navbar>
+<ion-tabs tabbarIcons="bottom" no-navbar>
-  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
-  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
-  <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbar-icons="right" no-navbar>
+<ion-tabs tabbarIcons="right" no-navbar>
-  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
-  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
-  <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 
 <!-- Icons left of text -->
-<ion-tabs tabbar-icons="left" no-navbar>
+<ion-tabs tabbarIcons="left" no-navbar>
-  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
-  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
-  <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- No icons -->
-<ion-tabs tabbar-icons="hide" no-navbar>
+<ion-tabs tabbarIcons="hide" no-navbar>
-  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
-  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
-  <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- No overflow text -->
 <ion-tabs no-navbar>
-  <ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
+  <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
-  <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
+  <ion-tab tabTitle="Indiana Jones and the Temple of Doom"></ion-tab>
-  <ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>
+  <ion-tab tabTitle="Indiana Jones and the Last Crusade"></ion-tab>
 </ion-tabs>
 
 
 <!-- primary color tabbar -->
 <ion-tabs no-navbar tabbar-style="primary">
-  <ion-tab tab-icon="call"></ion-tab>
+  <ion-tab tabIcon="call"></ion-tab>
-  <ion-tab tab-icon="heart"></ion-tab>
+  <ion-tab tabIcon="heart"></ion-tab>
-  <ion-tab tab-icon="settings"></ion-tab>
+  <ion-tab tabIcon="settings"></ion-tab>
 </ion-tabs>

ionic/components/text-input/test/floating-labels/main.html

@@ -8,7 +8,7 @@
 
     <ion-input floating-label>
       <ion-label>Floating Label 1</ion-label>
-      <input [(ng-model)]='myValues.value1' type="text">
+      <input [(ngModel)]='myValues.value1' type="text">
     </ion-input>
     Value: {{ myValues.value1 }}
 
@@ -24,7 +24,7 @@
 
     <ion-input floating-label>
       <ion-label primary>Floating Label 4</ion-label>
-      <textarea [(ng-model)]='myValues.value2'></textarea>
+      <textarea [(ngModel)]='myValues.value2'></textarea>
     </ion-input>
     Value: {{ myValues.value2 }}
 

ionic/components/text-input/test/form-inputs/main.html

@@ -4,12 +4,12 @@
 
 <ion-content>
 
-  <form (ng-submit)="submit($event)" [ng-form-model]="loginForm" #mf="ngForm" novalidate>
+  <form (ng-submit)="submit($event)" [ngFormModel]="loginForm" #mf="ngForm" novalidate>
 
     <ion-list>
       <ion-input>
         <ion-label>Email:</ion-label>
-        <input [(ng-model)]="login.email" ng-control="email" type="email" placeholder="Required" required>
+        <input [(ngModel)]="login.email" ngControl="email" type="email" placeholder="Required" required>
         <button clear item-right>
           <icon mail></icon>
         </button>
@@ -17,7 +17,7 @@
 
       <ion-input>
         <ion-label>Username:</ion-label>
-        <input [(ng-model)]="login.username" ng-control="username" type="text" placeholder="Optional">
+        <input [(ngModel)]="login.username" ngControl="username" type="text" placeholder="Optional">
         <button clear item-right>
           <icon person></icon>
         </button>
@@ -25,7 +25,7 @@
 
       <ion-input>
         <ion-label>Password:</ion-label>
-        <input [(ng-model)]="login.password" ng-control="password" type="password" placeholder="Required" required>
+        <input [(ngModel)]="login.password" ngControl="password" type="password" placeholder="Required" required>
         <button clear item-right>
           <icon lock></icon>
         </button>
@@ -33,7 +33,7 @@
 
       <ion-input>
         <ion-label>Comments:</ion-label>
-        <textarea [(ng-model)]="login.comments" ng-control="comments" placeholder="Required" required>Comment value</textarea>
+        <textarea [(ngModel)]="login.comments" ngControl="comments" placeholder="Required" required>Comment value</textarea>
       </ion-input>
 
       <ion-item [hidden]="submitted == false || mf.form.valid">

ionic/components/text-input/text-input.ts

@@ -60,7 +60,7 @@ import {Platform} from '../../platform/platform';
   template:
     '<div class="item-inner">' +
       '<ng-content></ng-content>' +
-      '<input [type]="type" aria-hidden="true" scroll-assist *ng-if="scrollAssist">' +
+      '<input [type]="type" aria-hidden="true" scroll-assist *ngIf="scrollAssist">' +
     '</div>',
   directives: [NgIf, forwardRef(() => InputScrollAssist)]
 })

ionic/components/toggle/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 
 it('should check apple via switch element click', function() {
-  element(by.css('[ng-control=appleCtrl] .toggle-media')).click();
+  element(by.css('[ngControl=appleCtrl] .toggle-media')).click();
 });
 
 

ionic/components/toggle/test/basic/main.html

@@ -4,23 +4,23 @@
 
 <ion-content>
 
-  <form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+  <form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
 
     <ion-list>
 
-      <ion-toggle value="apple" checked="true" ng-control="appleCtrl">
+      <ion-toggle value="apple" checked="true" ngControl="appleCtrl">
         Apple, value=apple, init checked
       </ion-toggle>
 
-      <ion-toggle ng-control="bananaCtrl">
+      <ion-toggle ngControl="bananaCtrl">
         Banana, init no checked/value attributes
       </ion-toggle>
 
-      <ion-toggle value="cherry" disabled="true" ng-control="cherryCtrl">
+      <ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl">
         Cherry, value=cherry, init disabled
       </ion-toggle>
 
-      <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
+      <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl">
         Grape, value=grape, init checked, disabled
       </ion-toggle>
 
@@ -28,7 +28,7 @@
         Secondary color
       </ion-toggle>
 
-      <ion-toggle value="apple" checked="true" [(ng-model)]="myModel">
+      <ion-toggle value="apple" checked="true" [(ngModel)]="myModel">
         I'm an NgModel
       </ion-toggle>
 

ionic/components/toolbar/test/scenarios/main.html

@@ -136,7 +136,7 @@
 
 
 <ion-toolbar>
-  <button menu-toggle>
+  <button menuToggle>
     <icon menu></icon>
   </button>
   <ion-buttons start>
@@ -155,7 +155,7 @@
   </button>
 </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
-  <button menu-toggle right>
+  <button menuToggle right>
     <icon menu></icon>
   </button>
 </ion-toolbar>

ionic/components/toolbar/toolbar-button.scss

@@ -33,7 +33,7 @@
 // Menu Toggle
 // --------------------------------------------------
 
-.bar-button-menu-toggle {
+.bar-button-menutoggle {
   display: flex;
   align-items: center;
 }

ionic/components/toolbar/toolbar.ios.scss

@@ -274,7 +274,7 @@ ion-buttons[right] {
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-.bar-button-menu-toggle {
+.bar-button-menutoggle {
   margin: 0 6px;
   padding: 0;
   min-width: 36px;
@@ -286,8 +286,8 @@ ion-buttons[right] {
   }
 }
 
-.bar-button-menu-toggle[end],
+.bar-button-menutoggle[end],
-.bar-button-menu-toggle[right] {
+.bar-button-menutoggle[right] {
   order: map-get($toolbar-order-ios, menu-toggle-end);
 }
 

ionic/components/toolbar/toolbar.md.scss

@@ -262,7 +262,7 @@ ion-buttons[right] {
 // Material Design Toolbar Menu Toggle
 // --------------------------------------------------
 
-.bar-button-menu-toggle {
+.bar-button-menutoggle {
   margin: 0 6px;
   padding: 0 2px;
   min-width: 44px;
@@ -274,8 +274,8 @@ ion-buttons[right] {
   }
 }
 
-.bar-button-menu-toggle[end],
+.bar-button-menutoggle[end],
-.bar-button-menu-toggle[right] {
+.bar-button-menutoggle[right] {
   margin: 0 2px;
   min-width: 28px;
   order: map-get($toolbar-order-md, menu-toggle-end);

ionic/components/toolbar/toolbar.scss

@@ -65,7 +65,7 @@ ion-buttons div {
 
 // TODO this is a temp hack to fix segment overlapping ion-nav-item
 ion-buttons,
-.bar-button-menu-toggle {
+.bar-button-menutoggle {
   z-index: 99;
 }
 

ionic/components/toolbar/toolbar.ts

@@ -79,7 +79,7 @@ export class ToolbarBase extends Ion  {
   selector: 'ion-toolbar',
   template:
     '<div class="toolbar-background"></div>' +
-    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
     '<ng-content select="ion-buttons[start]"></ng-content>' +
     '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
@@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion {
  * @private
  */
 @Directive({
-  selector: 'ion-buttons,[menu-toggle],ion-nav-items'
+  selector: 'ion-buttons,[menuToggle],ion-nav-items'
 })
 export class ToolbarItem {
   constructor(

ionic/config/config.ts

@@ -44,8 +44,8 @@ import {isObject, isDefined, isFunction, isArray, extend} from '../util/util';
  * We could also configure these values at a component level. Take `tabbarPlacement`, we can configure this as a property on our `ion-tabs`.
  *
  * ```html
- * <ion-tabs tabbar-placement="top">
+ * <ion-tabs tabbarPlacement="top">
- *    <ion-tab tab-title="Dash" tab-icon="pulse" [root]="tabRoot"></ion-tab>
+ *    <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
  *  </ion-tabs>
  * ```
  *

package.json

@@ -20,7 +20,7 @@
     "tooling"
   ],
   "dependencies": {
-    "angular2": "2.0.0-alpha.50",
+    "angular2": "2.0.0-alpha.52",
     "colors": "^1.1.2",
     "es6-promise": "^3.0.2",
     "es6-shim": "0.33.6",