ionic-framework/ionic/components/checkbox/checkbox.ts

import {
  View,
  Directive,
  ElementRef,
  Optional,
  Parent,
  NgControl
} from 'angular2/angular2';

import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent, IonicView} from '../../config/annotations';
import {Icon} from '../icon/icon';


@IonicComponent({
  selector: 'ion-checkbox',
  host: {
    'class': 'item',
    '[attr.aria-checked]': 'checked'
  },
  defaultProperties: {
    'iconOff': 'ion-ios-circle-outline',
    'iconOn': 'ion-ios-checkmark'
  }
})
@IonicView({
  template:
  '<div class="item-media media-checkbox" (click)="onClick($event)">' +
    '<icon [name]="iconOff" class="checkbox-off"></icon>' +
    '<icon [name]="iconOn" class="checkbox-on"></icon>' +
    '<content select="input"></content>' +
  '</div>' +
  '<div class="item-content">' +
    '<div class="item-label">' +
      '<content></content>' +
    '</div>' +
  '</div>'
})
export class Checkbox extends Ion {

  _checkbox: CheckboxInput;

  constructor(
    elementRef: ElementRef,
    ionicConfig: IonicConfig
  ) {
    super(elementRef, ionicConfig);
  }

  onAllChangesDone() {
    // Enforce that this directive actually contains a checkbox
    if (this._checkbox == null) {
      throw 'No <input type="checkbox"> found inside of <ion-checkbox>';
    }
  }

  registerCheckbox(checkboxDir) {
    if (this._checkbox != null) {
      throw 'Only one <input type="checkbox"> is allowed per <ion-checkbox>'
    }
    this._checkbox = checkboxDir.elementRef.nativeElement;
    this._checkboxDir = checkboxDir;
  }

  onClick(e) {
    let val = !this._checkbox.checked;
    this._checkbox.checked = val;
    this.checked = val;

    //TODO figure out a way to trigger change on the actual input to trigger
    // form updates

    // this._checkbox.dispatchEvent(e);
    //this._checkboxDir.control.valueAccessor.writeValue(val);
  }
}

@Directive({
  selector: 'input[type=checkbox]'
})
export class CheckboxInput {
  constructor(
    elementRef: ElementRef,
    @Optional() @Parent() container: Checkbox,
    @Optional() control: NgControl
  ) {
    this.elementRef = elementRef;
    this.control = control ? control : null;
    container && container.registerCheckbox(this);
  }
}