feat(toggle): add change event

Related #5513

ionic/components/checkbox/checkbox.ts

@@ -62,8 +62,8 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
   providers: [CHECKBOX_VALUE_ACCESSOR]
 })
 export class Checkbox {
-  private _checked: any = false;
+  private _checked: boolean = false;
-  private _disabled: any = false;
+  private _disabled: boolean = false;
   private _labelId: string;
   private _fn: Function;
 
@@ -105,11 +105,11 @@ export class Checkbox {
    * @input {boolean} whether or not the checkbox is checked (defaults to false)
    */
   @Input()
-  get checked() {
+  get checked(): boolean {
     return this._checked;
   }
 
-  set checked(val) {
+  set checked(val: boolean) {
     this._setChecked(isTrueProperty(val));
     this.onChange(this._checked);
   }
@@ -154,11 +154,11 @@ export class Checkbox {
    * @input {boolean} whether or not the checkbox is disabled or not.
    */
   @Input()
-  get disabled(): any {
+  get disabled(): boolean {
     return this._disabled;
   }
 
-  set disabled(val: any) {
+  set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
     this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
   }

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

@@ -18,8 +18,8 @@ class E2EApp {
   fruitsForm: ControlGroup;
   grapeDisabled: boolean;
   grapeChecked: boolean;
-  kiwiModel: boolean;
+  kiwiValue: boolean;
-  strawberryModel: boolean;
+  strawberryValue: boolean;
   formResults: string;
 
   constructor() {
@@ -32,9 +32,6 @@ class E2EApp {
 
     this.grapeChecked = true;
     this.grapeDisabled = true;
-
-    this.kiwiModel = true;
-    this.strawberryModel = false;
   }
 
   toggleGrapeChecked() {
@@ -45,6 +42,16 @@ class E2EApp {
     this.grapeDisabled = !this.grapeDisabled;
   }
 
+  kiwiChange(ev) {
+    console.log('kiwiChange', ev);
+    this.kiwiValue = ev.checked;
+  }
+
+  strawberryChange(ev) {
+    console.log('strawberryChange', ev);
+    this.strawberryValue = ev.checked;
+  }
+
   doSubmit(ev) {
     console.log('Submitting form', this.fruitsForm.value);
     this.formResults = JSON.stringify(this.fruitsForm.value);

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

@@ -28,13 +28,13 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Kiwi, NgModel false, Secondary color</ion-label>
+        <ion-label>Kiwi, (change) Secondary color</ion-label>
-        <ion-toggle secondary [(ngModel)]="kiwiModel"></ion-toggle>
+        <ion-toggle secondary (change)="kiwiChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Strawberry, NgModel true</ion-label>
+        <ion-label>Strawberry, (change) [checked]="true"</ion-label>
-        <ion-toggle [(ngModel)]="strawberryModel"></ion-toggle>
+        <ion-toggle danger (change)="strawberryChange($event)" [checked]="true"></ion-toggle>
       </ion-item>
 
     </ion-list>
@@ -56,8 +56,8 @@
     <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
     <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
-    <code>kiwiModel: {{kiwiModel}}</code><br>
+    <code>kiwiValue: {{kiwiValue}}</code><br>
-    <code>strawberryModel: {{strawberryModel}}</code><br>
+    <code>strawberryValue: {{strawberryValue}}</code><br>
   </p>
 
   <pre aria-hidden="true" padding>{{formResults}}</pre>

ionic/components/toggle/toggle.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, Input, Optional, Provider, forwardRef} from 'angular2/core';
+import {Component, ElementRef, Renderer, Input, Output, EventEmitter, Optional, Provider, forwardRef} from 'angular2/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Form} from '../../util/form';
@@ -76,8 +76,8 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
   providers: [TOGGLE_VALUE_ACCESSOR]
 })
 export class Toggle implements ControlValueAccessor  {
-  private _checked: any = false;
+  private _checked: boolean = false;
-  private _disabled: any = false;
+  private _disabled: boolean = false;
   private _labelId: string;
   private _activated: boolean = false;
   private _startX: number;
@@ -89,6 +89,11 @@ export class Toggle implements ControlValueAccessor  {
    */
   id: string;
 
+  /**
+   * @output {Toggle} expression to evaluate when the toggle value changes
+   */
+  @Output() change: EventEmitter<Toggle> = new EventEmitter();
+
   constructor(
     private _form: Form,
     private _elementRef: ElementRef,
@@ -170,11 +175,11 @@ export class Toggle implements ControlValueAccessor  {
   }
 
   @Input()
-  get checked(): any {
+  get checked(): boolean {
     return this._checked;
   }
 
-  set checked(val: any) {
+  set checked(val: boolean) {
     this._setChecked(isTrueProperty(val));
     this.onChange(this._checked);
   }
@@ -183,8 +188,11 @@ export class Toggle implements ControlValueAccessor  {
    * @private
    */
   private _setChecked(isChecked: boolean) {
-    this._checked = isChecked;
+    if (isChecked !== this._checked) {
-    this._item && this._item.setCssClass('item-toggle-checked', isChecked);
+      this._checked = isChecked;
+      this.change.emit(this);
+      this._item && this._item.setCssClass('item-toggle-checked', isChecked);
+    }
   }
 
   /**
@@ -213,11 +221,11 @@ export class Toggle implements ControlValueAccessor  {
   registerOnTouched(fn) { this.onTouched = fn; }
 
   @Input()
-  get disabled(): any {
+  get disabled(): boolean {
     return this._disabled;
   }
 
-  set disabled(val: any) {
+  set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
     this._item && this._item.setCssClass('item-toggle-disabled', this._disabled);
   }
@@ -225,7 +233,12 @@ export class Toggle implements ControlValueAccessor  {
   /**
    * @private
    */
-  onChange(_) {}
+  onChange(isChecked: boolean) {
+    // used when this input does not have an ngModel or ngControl
+    console.debug('toggle, onChange (no ngModel)', isChecked);
+    this._setChecked(isChecked);
+    this.onTouched();
+  }
 
   /**
    * @private