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}}

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();