refactor(events): rename all Ionic events to start with ion

BREAKING CHANGES:

Renamed all Ionic events to start with `ion`. The following events were
renamed:

- **Checkbox**
  - `change` -> `ionChange`
- **DateTime**
  - `change` -> `ionChange`
  - `cancel` -> `ionCancel`
- **InfiniteScroll**
  - `infinite` -> `ionInfinite`
- **Menu**
  - `opening` -> `ionDrag`
  - `opened` -> `ionOpen`
  - `closed` -> `ionClose`
- **Option**
  - `select` -> `ionSelect`
- **Picker**
  - `change` -> `ionChange`
- **RadioButton**
  - `select` -> `ionSelect`
- **RadioGroup**
  - `change` -> `ionChange`
- **Refresher**
  - `refresh` -> `ionRefresh`
  - `pulling` -> `ionPull`
  - `start` -> `ionStart`
- **Searchbar**
  - `input` -> `ionInput`
  - `blur` -> `ionBlur`
  - `focus` -> `ionFocus`
  - `cancel` -> `ionCancel`
  - `clear` -> `ionClear`
- **Segment**
  - `change` -> `ionChange`
  - `select` -> `ionSelect`
- **Select**
  - `change` -> `ionChange`
  - `cancel` -> `ionCancel`
- **Slides**
  - `willChange` -> `ionWillChange`
  - `didChange` -> `ionDidChange`
  - `move` -> `ionDrag`
- **TabButton**
  - `select` -> `ionSelect`
- **Tab**
  - `select` -> `ionSelect`
- **Tabs**
  - `change` -> `ionChange`
- **Toggle**
  - `change` -> `ionChange`

Closes #6568

demos/infinite-scroll/main.html

@@ -10,7 +10,7 @@
     </ion-item>
   </ion-list>
 
-  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">

demos/radio/main.html

@@ -36,7 +36,7 @@
 
     <ion-item>
       <ion-label>Enable "Never"</ion-label>
-      <ion-toggle (change)="isDisabled = !isDisabled"></ion-toggle>
+      <ion-toggle (ionChange)="isDisabled = !isDisabled"></ion-toggle>
     </ion-item>
 
     <ion-item>

demos/refresher/main.html

@@ -4,7 +4,7 @@
 
 
 <ion-content>
-  <ion-refresher (refresh)="doRefresh($event)" (pulling)="doPulling($event)">
+  <ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="doPulling($event)">
     <ion-refresher-content
       pullingText="Pull to refresh..."
       refreshingText="Refreshing...">

demos/select/main.html

@@ -29,7 +29,7 @@
 
     <ion-item>
       <ion-label>Date</ion-label>
-      <ion-select (change)="monthChange($event)">
+      <ion-select (ionChange)="monthChange($event)">
         <ion-option value="01">January</ion-option>
         <ion-option value="02">February</ion-option>
         <ion-option value="03" checked="true">March</ion-option>
@@ -43,7 +43,7 @@
         <ion-option value="11">November</ion-option>
         <ion-option value="12">December</ion-option>
       </ion-select>
-      <ion-select (change)="yearChange($event)">
+      <ion-select (ionChange)="yearChange($event)">
         <ion-option>1989</ion-option>
         <ion-option>1990</ion-option>
         <ion-option>1991</ion-option>

src/components/checkbox/checkbox.ts

@@ -83,7 +83,7 @@ export class Checkbox {
   /**
    * @output {Checkbox} expression to evaluate when the checkbox value changes
    */
-  @Output() change: EventEmitter<Checkbox> = new EventEmitter();
+  @Output() ionChange: EventEmitter<Checkbox> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -129,7 +129,7 @@ export class Checkbox {
     if (isChecked !== this._checked) {
       this._checked = isChecked;
       if (this._init) {
-        this.change.emit(this);
+        this.ionChange.emit(this);
       }
       this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
     }

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

@@ -29,13 +29,13 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Kiwi, (change) Secondary color</ion-label>
+        <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-        <ion-checkbox secondary (change)="kiwiChange($event)"></ion-checkbox>
+        <ion-checkbox secondary (ionChange)="kiwiChange($event)"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Strawberry, (change) [checked]="true"</ion-label>
+        <ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
-        <ion-checkbox light (change)="strawberryChange($event)" [checked]="true"></ion-checkbox>
+        <ion-checkbox light (ionChange)="strawberryChange($event)" [checked]="true"></ion-checkbox>
       </ion-item>
 
       <ion-item>

src/components/datetime/datetime.ts

@@ -407,12 +407,12 @@ export class DateTime {
   /**
    * @output {any} Any expression to evaluate when the datetime selection has changed.
    */
-  @Output() change: EventEmitter<any> = new EventEmitter();
+  @Output() ionChange: EventEmitter<any> = new EventEmitter();
 
   /**
    * @output {any} Any expression to evaluate when the datetime selection was cancelled.
    */
-  @Output() cancel: EventEmitter<any> = new EventEmitter();
+  @Output() ionCancel: EventEmitter<any> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -469,7 +469,7 @@ export class DateTime {
         text: this.cancelText,
         role: 'cancel',
         handler: () => {
-          this.cancel.emit(null);
+          this.ionCancel.emit(null);
         }
       },
       {
@@ -477,7 +477,7 @@ export class DateTime {
         handler: (data) => {
           console.log('datetime, done', data);
           this.onChange(data);
-          this.change.emit(data);
+          this.ionChange.emit(data);
         }
       }
     ];
@@ -485,7 +485,7 @@ export class DateTime {
     this.generate(picker);
     this.validate(picker);
 
-    picker.change.subscribe(() => {
+    picker.ionChange.subscribe(() => {
       this.validate(picker);
     });
 

src/components/datetime/test/basic/index.ts

@@ -26,6 +26,14 @@ class E2EPage {
     'l\u00f8r'
   ];
 
+  onChange(ev) {
+    console.log("Changed", ev);
+  }
+
+  onCancel(ev) {
+    console.log("Canceled", ev);
+  }
+
 }
 
 

src/components/datetime/test/basic/main.html

@@ -44,7 +44,7 @@
 
   <ion-item>
     <ion-label>h:mm a</ion-label>
-    <ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
+    <ion-datetime (ionChange)="onChange($event)" (ionCancel)="onCancel($event)" displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
   </ion-item>
 
   <ion-item>

src/components/infinite-scroll/infinite-scroll.ts

@@ -22,7 +22,7 @@ import {Content} from '../content/content';
  *    <ion-item *ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
  *  </ion-list>
  *
- *  <ion-infinite-scroll (infinite)="doInfinite($event)">
+ *  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  *    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  *  </ion-infinite-scroll>
  *
@@ -67,7 +67,7 @@ import {Content} from '../content/content';
  *  ```html
  *  <ion-content>
  *
- *    <ion-infinite-scroll (infinite)="doInfinite($event)">
+ *    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  *      <ion-infinite-scroll-content
  *        loadingSpinner="bubbles"
  *        loadingText="Loading more data...">
@@ -137,7 +137,7 @@ export class InfiniteScroll {
    * you must call the infinite scroll's `complete()` method when
    * your async operation has completed.
    */
-  @Output() infinite: EventEmitter<InfiniteScroll> = new EventEmitter();
+  @Output() ionInfinite: EventEmitter<InfiniteScroll> = new EventEmitter();
 
   constructor(
     @Host() private _content: Content,
@@ -179,7 +179,7 @@ export class InfiniteScroll {
     if (distanceFromInfinite < 0) {
       this._zone.run(() => {
         this.state = STATE_LOADING;
-        this.infinite.emit(this);
+        this.ionInfinite.emit(this);
       });
       return 5;
     }

src/components/infinite-scroll/test/basic/main.html

@@ -16,7 +16,7 @@
     </button>
   </ion-list>
 
-  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">

src/components/infinite-scroll/test/short-list/main.html

@@ -8,7 +8,7 @@
     </ion-item>
   </ion-list>
 
-  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">

src/components/menu/menu.ts

@@ -283,17 +283,17 @@ export class Menu extends Ion {
   /**
    * @output {event} When the menu is being dragged open.
    */
-  @Output() opening: EventEmitter<number> = new EventEmitter();
+  @Output() ionDrag: EventEmitter<number> = new EventEmitter();
 
   /**
    * @output {event} When the menu has been opened.
    */
-  @Output() opened: EventEmitter<boolean> = new EventEmitter();
+  @Output() ionOpen: EventEmitter<boolean> = new EventEmitter();
 
   /**
    * @output {event} When the menu has been closed.
    */
-  @Output() closed: EventEmitter<boolean> = new EventEmitter();
+  @Output() ionClose: EventEmitter<boolean> = new EventEmitter();
 
   constructor(
     private _menuCtrl: MenuController,
@@ -444,7 +444,7 @@ export class Menu extends Ion {
     if (this._isEnabled && this._isSwipeEnabled) {
       this._prevent();
       this._getType().setProgessStep(stepValue);
-      this.opening.next(stepValue);
+      this.ionDrag.emit(stepValue);
     }
   }
 
@@ -490,12 +490,12 @@ export class Menu extends Ion {
 
       if (isOpen) {
         this._cntEle.addEventListener('click', this.onContentClick);
-        this.opened.emit(true);
+        this.ionOpen.emit(true);
 
       } else {
         this.getNativeElement().classList.remove('show-menu');
         this.getBackdropElement().classList.remove('show-backdrop');
-        this.closed.emit(true);
+        this.ionClose.emit(true);
       }
     }
   }

src/components/menu/test/basic/index.ts

@@ -67,8 +67,16 @@ class E2EApp {
     });
   }
 
-  onMenuOpening(ev) {
+  onDrag(ev) {
-    console.log('onMenuOpening', ev);
+    console.log('Menu is being dragged', ev);
+  }
+
+  onOpen(ev) {
+    console.log('Menu is open', ev);
+  }
+
+  onClose(ev) {
+    console.log('Menu is closed', ev);
   }
 
   isChangeDetecting() {

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

@@ -1,4 +1,4 @@
-<ion-menu [content]="content" side="left" persistent="true">
+<ion-menu [content]="content" side="left" persistent="true" (ionDrag)="onDrag($event)" (ionOpen)="onOpen($event)"(ionClose)="onClose($event)">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -140,4 +140,4 @@
 
 <ion-nav id="nav" [root]="rootPage" #content></ion-nav>
 
-<div [hidden]="isChangeDetecting()"></div>
+<div [hidden]="isChangeDetecting()"></div>

src/components/option/option.ts

@@ -17,9 +17,9 @@ export class Option {
   private _value;
 
   /**
-   * @input {any} Event to evaluate when option has changed
+   * @input {any} Event to evaluate when option is selected
    */
-  @Output() select: EventEmitter<any> = new EventEmitter();
+  @Output() ionSelect: EventEmitter<any> = new EventEmitter();
 
   constructor(private _elementRef: ElementRef) {}
 

src/components/picker/picker.ts

@@ -17,7 +17,7 @@ import {raf, cancelRaf, CSS, pointerCoord} from '../../util/dom';
  */
 export class Picker extends ViewController {
 
-  @Output() change: EventEmitter<any>;
+  @Output() ionChange: EventEmitter<any>;
 
   constructor(opts: PickerOptions = {}) {
     opts.columns = opts.columns || [];
@@ -28,7 +28,7 @@ export class Picker extends ViewController {
     this.viewType = 'picker';
     this.isOverlay = true;
 
-    this.change = new EventEmitter();
+    this.ionChange = new EventEmitter();
 
     // by default, pickers should not fire lifecycle events of other views
     // for example, when an picker enters, the current active view should
@@ -122,7 +122,7 @@ class PickerColumnCmp {
   maxY: number;
   rotateFactor: number;
   lastIndex: number;
-  @Output() change: EventEmitter<any> = new EventEmitter();
+  @Output() ionChange: EventEmitter<any> = new EventEmitter();
 
   constructor(config: Config, private _sanitizer: DomSanitizationService) {
     this.rotateFactor = config.getNumber('pickerRotateFactor', 0);
@@ -382,7 +382,7 @@ class PickerColumnCmp {
         // new selected index has changed from the last index
         // update the lastIndex and emit that it has changed
         this.lastIndex = this.col.selectedIndex;
-        this.change.emit(this.col.options[this.col.selectedIndex]);
+        this.ionChange.emit(this.col.options[this.col.selectedIndex]);
       }
     }
   }
@@ -445,7 +445,7 @@ class PickerColumnCmp {
       '</div>' +
       '<div class="picker-columns">' +
         '<div class="picker-above-highlight"></div>' +
-        '<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (change)="_colChange($event)"</div>' +
+        '<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (ionChange)="_colChange($event)"</div>' +
         '<div class="picker-below-highlight"></div>' +
       '</div>' +
     '</div>',
@@ -538,7 +538,7 @@ class PickerDisplayCmp {
   private _colChange(selectedOption: PickerColumnOption) {
     // one of the columns has changed its selected index
     var picker = <Picker>this._viewCtrl;
-    picker.change.emit(this.getSelected());
+    picker.ionChange.emit(this.getSelected());
   }
 
   @HostListener('body:keyup', ['$event'])

src/components/radio/radio-button.ts

@@ -76,7 +76,7 @@ export class RadioButton {
   /**
    * @output {any} expression to be evaluated when selected
    */
-  @Output() select: EventEmitter<any> = new EventEmitter();
+  @Output() ionSelect: EventEmitter<any> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -151,7 +151,7 @@ export class RadioButton {
     ev.stopPropagation();
 
     this.checked = true;
-    this.select.emit(this.value);
+    this.ionSelect.emit(this.value);
   }
 
   /**

src/components/radio/radio-group.ts

@@ -86,7 +86,7 @@ export class RadioGroup {
   /**
    * @output {any} expression to be evaluated when selection has been changed
    */
-  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
+  @Output() ionChange: EventEmitter<RadioGroup> = new EventEmitter();
 
   constructor(
     private _renderer: Renderer,
@@ -105,7 +105,7 @@ export class RadioGroup {
     if (this._init) {
       this._update();
       this.onTouched();
-      this.change.emit(val);
+      this.ionChange.emit(val);
     }
 
     this._init = true;
@@ -133,7 +133,7 @@ export class RadioGroup {
       this.value = val;
       this._update();
       this.onTouched();
-      this.change.emit(val);
+      this.ionChange.emit(val);
     };
   }
 
@@ -174,7 +174,7 @@ export class RadioGroup {
     this._btns.push(button);
 
     // listen for radiobutton select events
-    button.select.subscribe((val) => {
+    button.ionSelect.subscribe((val) => {
       // this radiobutton has been selected
       this.onChange(val);
     });
@@ -217,7 +217,7 @@ export class RadioGroup {
     this.value = val;
     this._update();
     this.onTouched();
-    this.change.emit(val);
+    this.ionChange.emit(val);
   }
 
   /**

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

@@ -95,17 +95,17 @@
     <code><b>relationship:</b> {{relationship}}</code>
   </div>
 
-  <div radio-group (change)="petChange($event)">
+  <div radio-group (ionChange)="petChange($event)">
     <p>
-      <ion-radio (select)="dogSelect($event)"></ion-radio>
+      <ion-radio (ionSelect)="dogSelect($event)"></ion-radio>
       Dogs
     </p>
     <p>
-      <ion-radio (select)="catSelect($event)"></ion-radio>
+      <ion-radio (ionSelect)="catSelect($event)"></ion-radio>
       Cats
     </p>
     <p>
-      <ion-radio (select)="turtleSelect($event)"></ion-radio>
+      <ion-radio (ionSelect)="turtleSelect($event)"></ion-radio>
       Turtles
     </p>
   </div>

src/components/refresher/refresher-content.ts

@@ -57,10 +57,10 @@ export class RefresherContent {
    */
   ngOnInit() {
     if (!this.pullingIcon) {
-      this.pullingIcon = this._config.get('refresherPullingIcon', 'arrow-down');
+      this.pullingIcon = this._config.get('ionPullIcon', 'arrow-down');
     }
     if (!this.refreshingSpinner) {
-      this.refreshingSpinner = this._config.get('refresherRefreshingSpinner', this._config.get('spinner', 'ios'));
+      this.refreshingSpinner = this._config.get('ionRefreshingSpinner', this._config.get('spinner', 'ios'));
     }
   }
 }

src/components/refresher/refresher.ts

@@ -25,7 +25,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
  * ```html
  * <ion-content>
  *
- *   <ion-refresher (refresh)="doRefresh($event)">
+ *   <ion-refresher (ionRefresh)="doRefresh($event)">
  *     <ion-refresher-content></ion-refresher-content>
  *   </ion-refresher>
  *
@@ -59,7 +59,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
  *  ```html
  *  <ion-content>
  *
- *    <ion-refresher (refresh)="doRefresh($event)">
+ *    <ion-refresher (ionRefresh)="doRefresh($event)">
  *      <ion-refresher-content
  *        pullingIcon="arrow-dropdown"
  *        pullingText="Pull to refresh"
@@ -186,17 +186,17 @@ export class Refresher {
    * updated to `refreshing`. From within your refresh handler, you must call the
    * `complete()` method when your async operation has completed.
    */
-  @Output() refresh: EventEmitter<Refresher> = new EventEmitter();
+  @Output() ionRefresh: EventEmitter<Refresher> = new EventEmitter();
 
   /**
    * @output {event} While the user is pulling down the content and exposing the refresher.
    */
-  @Output() pulling: EventEmitter<Refresher> = new EventEmitter();
+  @Output() ionPull: EventEmitter<Refresher> = new EventEmitter();
 
   /**
    * @output {event} When the user begins to start pulling down.
    */
-  @Output() start: EventEmitter<Refresher> = new EventEmitter();
+  @Output() ionStart: EventEmitter<Refresher> = new EventEmitter();
 
 
   constructor(
@@ -348,11 +348,11 @@ export class Refresher {
     // emit "start" if it hasn't started yet
     if (!this._didStart) {
       this._didStart = true;
-      this.start.emit(this);
+      this.ionStart.emit(this);
     }
 
     // emit "pulling" on every move
-    this.pulling.emit(this);
+    this.ionPull.emit(this);
 
     // do nothing if the delta is less than the pull threshold
     if (this.deltaY < this.pullMin) {
@@ -414,7 +414,7 @@ export class Refresher {
 
     // emit "refresh" because it was pulled down far enough
     // and they let go to begin refreshing
-    this.refresh.emit(this);
+    this.ionRefresh.emit(this);
   }
 
   /**

src/components/refresher/test/basic/main.html

@@ -2,7 +2,7 @@
 
 <ion-content>
 
-  <ion-refresher (start)="doStart($event)" (pulling)="doPulling($event)" (refresh)="doRefresh($event)">
+  <ion-refresher (ionStart)="doStart($event)" (ionPull)="doPulling($event)" (ionRefresh)="doRefresh($event)">
 
     <ion-refresher-content
       pullingText="Pull to refresh..."

src/components/searchbar/searchbar.ts

@@ -15,16 +15,6 @@ import {isPresent, debounce} from '../../util/util';
   selector: '.searchbar-input',
 })
 export class SearchbarInput {
-  @HostListener('input', ['$event'])
-  /**
-   * @private
-   * Don't send the input's input event
-   */
-  private stopInput(ev) {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
-
   constructor(private _elementRef: ElementRef) {}
 }
 
@@ -40,8 +30,8 @@ export class SearchbarInput {
  * <ion-searchbar
  *   [(ngModel)]="myInput"
  *   [hideCancelButton]="shouldHideCancel"
- *   (input)="onInput($event)"
+ *   (ionInput)="onInput($event)"
- *   (cancel)="onCancel($event)">
+ *   (ionCancel)="onCancel($event)">
  * </ion-searchbar>
  * ```
  *
@@ -103,27 +93,27 @@ export class Searchbar extends Ion {
   /**
    * @output {event} When the Searchbar input has changed including cleared
    */
-  @Output() input: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() ionInput: EventEmitter<Searchbar> = new EventEmitter();
 
   /**
    * @output {event} When the Searchbar input has blurred
    */
-  @Output() blur: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() ionBlur: EventEmitter<Searchbar> = new EventEmitter();
 
   /**
    * @output {event} When the Searchbar input has focused
    */
-  @Output() focus: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() ionFocus: EventEmitter<Searchbar> = new EventEmitter();
 
   /**
    * @output {event} When the cancel button is clicked
    */
-  @Output() cancel: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() ionCancel: EventEmitter<Searchbar> = new EventEmitter();
 
   /**
    * @output {event} When the clear input button is clicked
    */
-  @Output() clear: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() ionClear: EventEmitter<Searchbar> = new EventEmitter();
 
   /**
    * @private
@@ -265,7 +255,7 @@ export class Searchbar extends Ion {
     this._tmr = setTimeout(() => {
       this.value = value;
       this.onChange(value);
-      this.input.emit(this);
+      this.ionInput.emit(this);
     }, Math.round(this.debounce));
   }
 
@@ -274,7 +264,7 @@ export class Searchbar extends Ion {
    * Sets the Searchbar to focused and aligned left on input focus.
    */
   inputFocused() {
-    this.focus.emit(this);
+    this.ionFocus.emit(this);
 
     this.isFocused = true;
     this.shouldLeftAlign = true;
@@ -294,7 +284,7 @@ export class Searchbar extends Ion {
       this.blurInput = true;
       return;
     }
-    this.blur.emit(this);
+    this.ionBlur.emit(this);
 
     this.isFocused = false;
     this.shouldLeftAlign = this.value && this.value.trim() !== '';
@@ -306,11 +296,11 @@ export class Searchbar extends Ion {
    * Clears the input field and triggers the control change.
    */
   clearInput() {
-    this.clear.emit(this);
+    this.ionClear.emit(this);
 
     this.value = '';
     this.onChange(this.value);
-    this.input.emit(this);
+    this.ionInput.emit(this);
 
     this.blurInput = false;
   }
@@ -322,7 +312,7 @@ export class Searchbar extends Ion {
    * then calls the custom cancel function if the user passed one in.
    */
   cancelSearchbar() {
-    this.cancel.emit(this);
+    this.ionCancel.emit(this);
 
     this.clearInput();
     this.blurInput = true;

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

@@ -1,25 +1,25 @@
 <ion-content>
   <h5 padding-left> Search - Default </h5>
-  <ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (input)="triggerInput($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
     defaultSearch: <b>{{ defaultSearch }}</b>
   </p>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-searchbar [(ngModel)]="customPlaceholder" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
     customPlaceholder: <b>{{ customPlaceholder }}</b>
   </p>
 
   <h5 padding-left> Search - Hide Cancel Button </h5>
-  <ion-searchbar [(ngModel)]="defaultCancel" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
     defaultCancel: <b>{{ defaultCancel }}</b>
   </p>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 </ion-content>

src/components/searchbar/test/nav/second.html

@@ -8,7 +8,7 @@
 </ion-toolbar>
 
 <ion-content>
-  <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="getItems($event)"></ion-searchbar>
   <ion-list>
     <ion-item *ngFor="let item of items">
       {{ item }}

src/components/segment/segment.ts

@@ -11,10 +11,10 @@ import {isTrueProperty, isPresent} from '../../util/util';
  * @usage
  * ```html
  * <ion-segment [(ngModel)]="relationship" primary>
- *   <ion-segment-button value="friends" (select)="selectedFriends()">
+ *   <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
  *     Friends
  *   </ion-segment-button>
- *   <ion-segment-button value="enemies" (select)="selectedEnemies()">
+ *   <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
  *     Enemies
  *   </ion-segment-button>
  * </ion-segment>
@@ -66,7 +66,7 @@ export class SegmentButton {
   /**
    * @output {SegmentButton} expression to evaluate when a segment button has been clicked
    */
-  @Output() select: EventEmitter<SegmentButton> = new EventEmitter();
+  @Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter();
 
   constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
 
@@ -97,7 +97,7 @@ export class SegmentButton {
   @HostListener('click', ['$event'])
   private onClick(ev) {
     console.debug('SegmentButton, select', this.value);
-    this.select.emit(this);
+    this.ionSelect.emit(this);
   }
 
   /**
@@ -130,7 +130,7 @@ export class SegmentButton {
  *
  * @usage
  * ```html
- * <ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>
+ * <ion-segment [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)" danger>
  *   <ion-segment-button value="friends">
  *     Friends
  *   </ion-segment-button>
@@ -178,7 +178,7 @@ export class Segment {
   /**
    * @output {Any}  expression to evaluate when a segment button has been changed
    */
-  @Output() change: EventEmitter<SegmentButton> = new EventEmitter();
+  @Output() ionChange: EventEmitter<SegmentButton> = new EventEmitter();
 
 
   /**
@@ -231,10 +231,10 @@ export class Segment {
   ngAfterViewInit() {
    let buttons = this._buttons.toArray();
    for (let button of buttons) {
-     button.select.subscribe((selectedButton) => {
+     button.ionSelect.subscribe((selectedButton) => {
        this.writeValue(selectedButton.value);
        this.onChange(selectedButton.value);
-       this.change.emit(selectedButton);
+       this.ionChange.emit(selectedButton);
      });
 
      if (isPresent(this.value)) {

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

@@ -1,9 +1,9 @@
 <ion-toolbar>
-  <ion-segment id="segment" [(ngModel)]="relationship" (change)="onSegmentChanged($event)">
+  <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
-    <ion-segment-button value="friends" (select)="onSegmentSelected($event)" class="e2eSegmentFriends">
+    <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
       Friends
     </ion-segment-button>
-    <ion-segment-button value="enemies" (select)="onSegmentSelected($event)">
+    <ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
       Enemies
     </ion-segment-button>
   </ion-segment>

src/components/segment/test/swipe/main.html

@@ -4,7 +4,7 @@
   </ion-title>
 </ion-navbar>
 <ion-toolbar>
-  <ion-segment [(ngModel)]="selectedSegment" (change)="onSegmentChanged($event)">
+  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
     <ion-segment-button value="first">
       First
     </ion-segment-button>
@@ -19,7 +19,7 @@
 
 <ion-content padding>
 
-  <ion-slides (change)="onSlideChanged($event)" #loopSlider>
+  <ion-slides (ionDidChange)="onSlideChanged($event)" #loopSlider>
     <ion-slide *ngFor="let slide of slides">
       <h1>{{ slide.title }}</h1>
     </ion-slide>

src/components/select/select.ts

@@ -178,12 +178,12 @@ export class Select {
   /**
    * @output {any} Any expression you want to evaluate when the selection has changed.
    */
-  @Output() change: EventEmitter<any> = new EventEmitter();
+  @Output() ionChange: EventEmitter<any> = new EventEmitter();
 
   /**
    * @output {any} Any expression you want to evaluate when the selection was cancelled.
    */
-  @Output() cancel: EventEmitter<any> = new EventEmitter();
+  @Output() ionCancel: EventEmitter<any> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -239,7 +239,7 @@ export class Select {
       text: this.cancelText,
       role: 'cancel',
       handler: () => {
-        this.cancel.emit(null);
+        this.ionCancel.emit(null);
       }
     }];
 
@@ -268,7 +268,7 @@ export class Select {
           text: input.text,
           handler: () => {
             this.onChange(input.value);
-            this.change.emit(input.value);
+            this.ionChange.emit(input.value);
           }
         };
       }));
@@ -307,7 +307,7 @@ export class Select {
         text: this.okText,
         handler: selectedValues => {
           this.onChange(selectedValues);
-          this.change.emit(selectedValues);
+          this.ionChange.emit(selectedValues);
         }
       });
 

src/components/select/test/multiple-value/main.html

@@ -22,7 +22,7 @@
 
   <ion-item>
     <ion-label>Car Features</ion-label>
-    <ion-select [(ngModel)]="carFeatures" [multiple]="true" (change)="carChange($event)">
+    <ion-select [(ngModel)]="carFeatures" [multiple]="true" (ionChange)="carChange($event)">
       <ion-option value="backupcamera">Backup Camera</ion-option>
       <ion-option value="heatedseats">Headted Seats</ion-option>
       <ion-option value="keyless">Keyless Entry</ion-option>

src/components/select/test/single-value/main.html

@@ -14,7 +14,7 @@
 
   <ion-item>
     <ion-label>Gaming</ion-label>
-    <ion-select [(ngModel)]="gaming" (cancel)="gamingCancel()" (change)="gamingChange($event)">
+    <ion-select [(ngModel)]="gaming" (ionCancel)="gamingCancel()" (ionChange)="gamingChange($event)">
       <ion-option value="nes">NES</ion-option>
       <ion-option value="n64">Nintendo64</ion-option>
       <ion-option value="ps">PlayStation</ion-option>
@@ -56,7 +56,7 @@
       <ion-option>Pearl Jam</ion-option>
       <ion-option>Smashing Pumpkins</ion-option>
       <ion-option>Soundgarden</ion-option>
-      <ion-option (select)="stpSelect()">Stone Temple Pilots</ion-option>
+      <ion-option (ionSelect)="stpSelect()">Stone Temple Pilots</ion-option>
     </ion-select>
   </ion-item>
 
@@ -96,4 +96,4 @@
     <br>
   </p>
 
-</ion-content>
+</ion-content>

src/components/slides/slides.ts

@@ -146,10 +146,10 @@ import {Scroll} from '../scroll/scroll';
  * ```
  *
  * We can also add events to listen to on the `<ion-slides>` element.
- * Let's add the `didChange` event and call a method when the slide changes:
+ * Let's add the `ionDidChange` event and call a method when the slide changes:
  *
  * ```html
- * <ion-slides #mySlider (didChange)="onSlideChanged()" [options]="mySlideOptions">
+ * <ion-slides #mySlider (ionDidChange)="onSlideChanged()" [options]="mySlideOptions">
  * ```
  *
  * In our class, we add the `onSlideChanged()` method which gets the active
@@ -311,30 +311,20 @@ export class Slides extends Ion {
    */
   @Input() zoomMax: any;
 
-  /**
-   * @private Deprecated
-   */
-  @Output() slideChangeStart: EventEmitter<any> = new EventEmitter();
-
-  /**
-   * @private Deprecated
-   */
-  @Output() change: EventEmitter<any> = new EventEmitter();
-
   /**
    * @output {any} Expression to evaluate when a slide change starts.
    */
-  @Output() willChange: EventEmitter<any> = new EventEmitter();
+  @Output() ionWillChange: EventEmitter<any> = new EventEmitter();
 
   /**
    * @output {any} Expression to evaluate when a slide change ends.
    */
-  @Output() didChange: EventEmitter<any> = new EventEmitter();
+  @Output() ionDidChange: EventEmitter<any> = new EventEmitter();
 
   /**
    * @output {any} Expression to evaluate when a slide moves.
    */
-  @Output() move: EventEmitter<any> = new EventEmitter();
+  @Output() ionDrag: EventEmitter<any> = new EventEmitter();
 
 
   constructor(elementRef: ElementRef, renderer: Renderer) {
@@ -371,10 +361,6 @@ export class Slides extends Ion {
       console.warn('The "zoom" attribute has been deprecated. Please pass it in options.');
     }
 
-    // Deprecated 04-18 beta.5
-    console.warn('The "slideChangeStart" event has been deprecated. Please use "willChange" instead. Ignore this if you aren\'t using it.');
-    console.warn('The "change" event has been deprecated. Please use "didChange" instead. Ignore this if you aren\'t using it.');
-
     if (isPresent(this.options.pager)) {
       this.showPager = isTrueProperty(this.options.pager);
     }
@@ -406,17 +392,11 @@ export class Slides extends Ion {
       return this.options.onTransitionEnd && this.options.onTransitionEnd(swiper, e);
     };
     options.onSlideChangeStart = (swiper) => {
-      // TODO deprecated 2016-04-18
+      this.ionWillChange.emit(swiper);
-      this.slideChangeStart.emit(swiper);
-
-      this.willChange.emit(swiper);
       return this.options.onSlideChangeStart && this.options.onSlideChangeStart(swiper);
     };
     options.onSlideChangeEnd = (swiper) => {
-      // TODO deprecated 2016-04-18
+      this.ionDidChange.emit(swiper);
-      this.change.emit(swiper);
-
-      this.didChange.emit(swiper);
       return this.options.onSlideChangeEnd && this.options.onSlideChangeEnd(swiper);
     };
     options.onLazyImageLoad = (swiper, slide, img) => {
@@ -426,7 +406,7 @@ export class Slides extends Ion {
       return this.options.onLazyImageReady && this.options.onLazyImageReady(swiper, slide, img);
     };
     options.onSliderMove = (swiper, e) => {
-      this.move.emit(swiper);
+      this.ionDrag.emit(swiper);
       return this.options.onSliderMove && this.options.onSliderMove(swiper, e);
     };
 
@@ -784,7 +764,7 @@ export class Slides extends Ion {
    *
    * @param {number} index  The index number of the slide.
    * @param {number} speed  Transition duration (in ms). Optional.
-   * @param {boolean} runCallbacks  Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
+   * @param {boolean} runCallbacks  Whether or not to emit the `ionWillChange`/`ionDidChange` events. Optional. Default true.
    */
   slideTo(index: number, speed?: number, runCallbacks?: boolean) {
     this.slider.slideTo(index, speed, runCallbacks);
@@ -794,7 +774,7 @@ export class Slides extends Ion {
    * Transition to the next slide.
    *
    * @param {number} speed  Transition duration (in ms). Optional.
-   * @param {boolean} runCallbacks  Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
+   * @param {boolean} runCallbacks  Whether or not to emit the `ionWillChange`/`ionDidChange` events. Optional. Default true.
    */
   slideNext(speed?: number, runCallbacks?: boolean) {
     this.slider.slideNext(runCallbacks, speed);
@@ -804,7 +784,7 @@ export class Slides extends Ion {
    * Transition to the previous slide.
    *
    * @param {number} speed  Transition duration (in ms). Optional.
-   * @param {boolean} runCallbacks  Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
+   * @param {boolean} runCallbacks  Whether or not to emit the `ionWillChange`/`ionDidChange` events. Optional. Default true.
    */
   slidePrev(speed?: number, runCallbacks?: boolean) {
     this.slider.slidePrev(runCallbacks, speed);

src/components/slides/test/controller/index.ts

@@ -22,6 +22,10 @@ class MyPage {
     console.log("Previous index is", previousIndex, "Current index is", currentIndex);
   }
 
+  onSlideMove(ev) {
+    console.log("Slide moving", ev);
+  }
+
   goToPrevSlide() {
     this.slider.slidePrev();
   }

src/components/slides/test/controller/main.html

@@ -1,4 +1,4 @@
-<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()" class="my-slides">
+<ion-slides #mySlider [options]="mySlideOptions" (ionDidChange)="onSlideChanged()" (ionDrag)="onSlideMove($event)" class="my-slides">
   <ion-slide padding>
     <h1>Slide 1</h1>
     <button block (click)="goToPrevSlide()">Navigate Back</button>

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

@@ -8,7 +8,7 @@
 </ion-navbar>
 
 <ion-content>
-  <ion-slides pager [options]="mySlideOptions" (didChange)="onSlideChanged($event)" (willChange)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
+  <ion-slides pager [options]="mySlideOptions" (ionDidChange)="onSlideChanged($event)" (ionWillChange)="onSlideChangeStart($event)" (ionDrag)="onSlideMove($event)">
     <ion-slide>
       <h3>Thank you for choosing the Awesome App!</h3>
       <div id="logo">

src/components/slides/test/loop/main.html

@@ -1,5 +1,5 @@
 <div class="slides-div">
-  <ion-slides [options]="myTopSlideOptions" #loopSlider (didChange)="onSlideChanged($event)" pager>
+  <ion-slides [options]="myTopSlideOptions" #loopSlider (ionDidChange)="onSlideChanged($event)" pager>
     <ion-slide *ngFor="let slide of slides" [ngClass]="slide.class">
       Loop {{ slide.name }}
     </ion-slide>
@@ -8,7 +8,7 @@
 
 
 <div class="slides-div">
-  <ion-slides (didChange)="onSlideChanged($event)" pager>
+  <ion-slides (ionDidChange)="onSlideChanged($event)" pager>
     <ion-slide *ngFor="let slide of slides" [ngClass]="slide.class">
       Don't Loop {{ slide.name }}
     </ion-slide>

src/components/tabs/tab-button.ts

@@ -32,7 +32,7 @@ export class TabButton extends Ion {
   private _layout: string;
 
   @Input() tab: Tab;
-  @Output() select: EventEmitter<Tab> = new EventEmitter();
+  @Output() ionSelect: EventEmitter<Tab> = new EventEmitter();
 
   constructor(config: Config, elementRef: ElementRef) {
     super(elementRef);
@@ -53,6 +53,6 @@ export class TabButton extends Ion {
 
   @HostListener('click')
   private onClick() {
-    this.select.emit(this.tab);
+    this.ionSelect.emit(this.tab);
   }
 }

src/components/tabs/tab.ts

@@ -85,13 +85,13 @@ import {TabButton} from './tab-button';
  * ```
  *
  * Sometimes you may want to call a method instead of navigating to a new
- * page. You can use the `(select)` event to call a method on your class when
+ * page. You can use the `(ionSelect)` event to call a method on your class when
  * the tab is selected. Below is an example of presenting a modal from one of
  * the tabs.
  *
  * ```html
  * <ion-tabs preloadTabs="false">
- *   <ion-tab (select)="chat()"></ion-tab>
+ *   <ion-tab (ionSelect)="chat()"></ion-tab>
  * </ion-tabs>
  * ```
  *
@@ -204,7 +204,7 @@ export class Tab extends NavController {
   /**
    * @output {Tab} Method to call when the current tab is selected
    */
-  @Output() select: EventEmitter<Tab> = new EventEmitter();
+  @Output() ionSelect: EventEmitter<Tab> = new EventEmitter();
 
   constructor(
     @Inject(forwardRef(() => Tabs)) parentTabs: Tabs,

src/components/tabs/tabs.ts

@@ -203,7 +203,7 @@ export class Tabs extends Ion {
   /**
    * @input {any} Expression to evaluate when the tab changes.
    */
-  @Output() change: EventEmitter<Tab> = new EventEmitter();
+  @Output() ionChange: EventEmitter<Tab> = new EventEmitter();
 
   /**
    * @private
@@ -272,7 +272,7 @@ export class Tabs extends Ion {
     }
 
     this._btns.toArray().forEach((tabButton: TabButton) => {
-      tabButton.select.subscribe((tab: Tab) => {
+      tabButton.ionSelect.subscribe((tab: Tab) => {
         this.select(tab);
       });
     });
@@ -365,8 +365,8 @@ export class Tabs extends Ion {
 
     selectedTab.load(opts, () => {
 
-      selectedTab.select.emit(selectedTab);
+      selectedTab.ionSelect.emit(selectedTab);
-      this.change.emit(selectedTab);
+      this.ionChange.emit(selectedTab);
 
       if (selectedTab.root) {
         // only show the selectedTab if it has a root
@@ -445,8 +445,8 @@ export class Tabs extends Ion {
     let instance = active.instance;
 
     // If they have a custom tab selected handler, call it
-    if (instance.tabSelected) {
+    if (instance.ionSelected) {
-      return instance.tabSelected();
+      return instance.ionSelected();
     }
 
     // If we're a few pages deep, pop to root

src/components/tabs/test/advanced/index.ts

@@ -73,14 +73,14 @@ class TabsPage {
   constructor(private nav: NavController, private params: NavParams) {}
 
   ngAfterViewInit() {
-    this.tabs.change.subscribe(tab => {
+    this.tabs.ionChange.subscribe(tab => {
-      console.log('tabs.change.subscribe', tab.index);
+      console.log('tabs.ionChange.subscribe', tab.index);
     });
   }
 
   onTabChange() {
     // wired up through the template
-    // <ion-tabs (change)="onTabChange()">
+    // <ion-tabs (ionChange)="onTabChange()">
     console.log('onTabChange');
   }
 

src/components/tabs/test/advanced/tabs.html

@@ -1,7 +1,7 @@
 
-<ion-tabs preloadTabs="false" (change)="onTabChange()">
+<ion-tabs preloadTabs="false" (ionChange)="onTabChange()">
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
-  <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (select)="chat()"></ion-tab>
+  <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()"></ion-tab>
 </ion-tabs>

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

@@ -171,8 +171,8 @@ export class Tab3 {
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content>
+    <ion-tabs #content (ionChange)="onChange($event)">
-      <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1" (ionSelect)="onSelect($event)"></ion-tab>
       <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
       <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
@@ -182,6 +182,14 @@ export class TabsPage {
   root1 = Tab1;
   root2 = Tab2;
   root3 = Tab3;
+
+  onChange(ev) {
+    console.log("Changed tab", ev);
+  }
+
+  onSelect(ev) {
+    console.log("Selected tab", ev);
+  }
 }
 
 @App({

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

@@ -19,12 +19,12 @@
 
       <ion-item>
         <ion-label>Apple, ngControl</ion-label>
-        <ion-toggle ngControl="appleCtrl" (change)="appleChange($event)"></ion-toggle>
+        <ion-toggle ngControl="appleCtrl" (ionChange)="appleChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
         <ion-label>Banana, ngControl</ion-label>
-        <ion-toggle ngControl="bananaCtrl" (change)="bananaChange($event)"></ion-toggle>
+        <ion-toggle ngControl="bananaCtrl" (ionChange)="bananaChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
@@ -38,13 +38,13 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Kiwi, (change) Secondary color</ion-label>
+        <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-        <ion-toggle secondary (change)="kiwiChange($event)"></ion-toggle>
+        <ion-toggle secondary (ionChange)="kiwiChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Strawberry, (change) [checked]="true"</ion-label>
+        <ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
-        <ion-toggle danger (change)="strawberryChange($event)" [checked]="true"></ion-toggle>
+        <ion-toggle danger (ionChange)="strawberryChange($event)" [checked]="true"></ion-toggle>
       </ion-item>
 
     </ion-list>

src/components/toggle/toggle.ts

@@ -96,7 +96,7 @@ export class Toggle implements ControlValueAccessor  {
   /**
    * @output {Toggle} expression to evaluate when the toggle value changes
    */
-  @Output() change: EventEmitter<Toggle> = new EventEmitter();
+  @Output() ionChange: EventEmitter<Toggle> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -195,7 +195,7 @@ export class Toggle implements ControlValueAccessor  {
     if (isChecked !== this._checked) {
       this._checked = isChecked;
       if (this._init) {
-        this.change.emit(this);
+        this.ionChange.emit(this);
       }
       this._item && this._item.setCssClass('item-toggle-checked', isChecked);
     }