diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index b47403a71d..9bbd050882 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/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 = new EventEmitter();
+
constructor(
private _form: Form,
@Optional() private _item: Item
@@ -113,8 +118,11 @@ export class Checkbox {
* @private
*/
private _setChecked(isChecked: boolean) {
- this._checked = isChecked;
- this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
+ if (isChecked !== this._checked) {
+ this._checked = isChecked;
+ this.change.emit(this);
+ this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
+ }
}
/**
@@ -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
diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts
index 0e0a75004a..3d068fd239 100644
--- a/ionic/components/checkbox/test/basic/index.ts
+++ b/ionic/components/checkbox/test/basic/index.ts
@@ -19,8 +19,8 @@ class E2EApp {
fruitsForm: ControlGroup;
grapeDisabled: boolean;
grapeChecked: boolean;
- kiwiModel: boolean;
- strawberryModel: boolean;
+ kiwiValue: 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);
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index 18815a3306..417cec82b8 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -29,13 +29,13 @@
- Kiwi, NgModel false, Secondary color
-
+ Kiwi, (change) Secondary color
+
- Strawberry, NgModel true
-
+ Strawberry, (change) [checked]="true"
+
@@ -62,8 +62,8 @@
cherry.value: {{fruitsForm.controls.cherryCtrl.value}}
grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}
grape.value: {{fruitsForm.controls.grapeCtrl.value}}
- kiwiModel: {{kiwiModel}}
- strawberryModel: {{strawberryModel}}
+ kiwiValue: {{kiwiValue}}
+ strawberryValue: {{strawberryValue}}
{{formResults}}
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 25ac9e8368..e9bb16532a 100644
--- a/ionic/components/segment/segment.ts
+++ b/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 = new EventEmitter();