feat(checkbox): add change event

Related #5513

ionic/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, Input, HostListener, Provider, forwardRef} from 'angular2/core';
+import {Component, Optional, Input, Output, EventEmitter, HostListener, Provider, forwardRef} from 'angular2/core';
 import {NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Form} from '../../util/form';
@@ -72,6 +72,11 @@ export class Checkbox {
    */
   id: string;
 
+  /**
+   * @output {Checkbox} expression to evaluate when the checkbox value changes
+   */
+  @Output() change: EventEmitter<Checkbox> = new EventEmitter();
+
   constructor(
     private _form: Form,
     @Optional() private _item: Item
@@ -113,9 +118,12 @@ export class Checkbox {
    * @private
    */
   private _setChecked(isChecked: boolean) {
+    if (isChecked !== this._checked) {
       this._checked = isChecked;
+      this.change.emit(this);
       this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
     }
+  }
 
   /**
    * @private
@@ -158,7 +166,12 @@ export class Checkbox {
   /**
    * @private
    */
-  onChange(_) {}
+  onChange(isChecked: boolean) {
+    // used when this input does not have an ngModel or ngControl
+    console.debug('checkbox, onChange (no ngModel)', isChecked);
+    this._setChecked(isChecked);
+    this.onTouched();
+  }
 
   /**
    * @private

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

@@ -19,8 +19,8 @@ class E2EApp {
   fruitsForm: ControlGroup;
   grapeDisabled: boolean;
   grapeChecked: boolean;
-  kiwiModel: boolean;
+  kiwiValue: boolean;
-  strawberryModel: boolean;
+  strawberryValue: boolean;
   standAloneChecked: boolean;
   formResults: string;
 
@@ -35,9 +35,6 @@ class E2EApp {
     this.grapeDisabled = true;
     this.grapeChecked = true;
     this.standAloneChecked = true;
-
-    this.kiwiModel = false;
-    this.strawberryModel = true;
   }
 
   toggleGrapeChecked() {
@@ -48,6 +45,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/checkbox/test/basic/main.html

@@ -29,13 +29,13 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Kiwi, NgModel false, Secondary color</ion-label>
+        <ion-label>Kiwi, (change) Secondary color</ion-label>
-        <ion-checkbox secondary [(ngModel)]="kiwiModel"></ion-checkbox>
+        <ion-checkbox secondary (change)="kiwiChange($event)"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Strawberry, NgModel true</ion-label>
+        <ion-label>Strawberry, (change) [checked]="true"</ion-label>
-        <ion-checkbox light [(ngModel)]="strawberryModel"></ion-checkbox>
+        <ion-checkbox light (change)="strawberryChange($event)" [checked]="true"></ion-checkbox>
       </ion-item>
 
     </ion-list>
@@ -62,8 +62,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/segment/segment.ts

@@ -62,7 +62,7 @@ export class SegmentButton {
   @Input() value: string;
 
   /**
-   * @output {any} expression to evaluate when a segment button has been clicked
+   * @output {SegmentButton} expression to evaluate when a segment button has been clicked
    */
   @Output() select: EventEmitter<SegmentButton> = new EventEmitter();