feat(mdCheckbox): support two-way binding to checked property

 - add basic switch usage to examples

examples/all.ts

@@ -10,12 +10,15 @@ import ToolbarBasicUsage from './components/toolbar/basic_usage';
 import ProgressCircularBasicUsage from './components/progress_circular/basic_usage';
 import ProgressLinearBasicUsage from './components/progress_linear/basic_usage';
 
+import SwitchBasicUsage from './components/switch/basic_usage';
+
 /**
  * Collection of Material Design component directives.
  */
 export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   CardBasicUsage, CardInCardActions, CardActionButtons,
   ToolbarBasicUsage,
+  SwitchBasicUsage,
   ProgressCircularBasicUsage,
   ProgressLinearBasicUsage
 ]);

examples/components/switch/basic_usage.html

@@ -0,0 +1,20 @@
+<div class="inset">
+  <md-switch [(checked)]="data.cb1" aria-label="Switch 1">
+    Switch 1: {{ data.cb1 }}
+  </md-switch>
+  <md-switch [(checked)]="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
+    Switch 2 (md-warn): {{ data.cb2 }}
+  </md-switch>
+  <md-switch disabled="true" aria-label="Disabled switch" [(checked)]="disabledModel">
+    Switch (Disabled)
+  </md-switch>
+  <md-switch disabled="true" aria-label="Disabled active switch" [(checked)]="data.cb4">
+    Switch (Disabled, Active)
+  </md-switch>
+  <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" [(checked)]="data.cb5">
+    Switch (md-primary): No Ink
+  </md-switch>
+  <md-switch [checked]="data.cb6" aria-label="Switch 6" (checkedChange)="onChange($event)">
+    Switch 6 message: {{ message }}
+  </md-switch>
+</div>

examples/components/switch/basic_usage.ts

@@ -0,0 +1,17 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from '../../base';
+
+@Component({selector: 'switch-basic-usage'})
+@View({templateUrl: 'examples/components/switch/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
+export default class SwitchBasicUsage {
+  public data: any = {
+    cb1: true,
+    cb4: true,
+    cb5: false
+  };
+  public message = 'false';
+
+  public onChange(cbState) {
+    this.message = cbState;
+  };
+}

ng2-material/components/checkbox/checkbox.ts

@@ -3,7 +3,9 @@ import {isPresent} from 'angular2/src/facade/lang';
 import {KeyCodes} from '../../core/key_codes';
 import {KeyboardEvent} from 'angular2/src/facade/browser';
 import {NumberWrapper} from 'angular2/src/facade/lang';
-import {Output, EventEmitter} from "angular2/core";
+import {Input, Output, EventEmitter} from 'angular2/core';
+
+// TODO (jdd): ng-true-value, ng-false-value
 
 @Component({
   selector: 'md-checkbox',
@@ -23,16 +25,16 @@ import {Output, EventEmitter} from "angular2/core";
 })
 export class MdCheckbox {
 
-  @Output() ngOnChange:EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() checkedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /** Whether this checkbox is checked. */
-  checked: boolean;
+  @Input() checked: boolean;
 
   /** Whether this checkbox is disabled. */
-  disabled_: boolean;
+  @Input('disabled') disabled_: boolean;
 
   /** Setter for tabindex */
-  tabindex: number;
+  @Input() tabindex: number;
 
   constructor(@Attribute('tabindex') tabindex: string) {
     this.checked = false;
@@ -49,7 +51,7 @@ export class MdCheckbox {
   }
 
   onKeydown(event: KeyboardEvent) {
-    if (event.keyCode == KeyCodes.SPACE) {
+    if (event.keyCode === KeyCodes.SPACE) {
       event.preventDefault();
       this.toggle(event);
     }
@@ -62,6 +64,6 @@ export class MdCheckbox {
     }
 
     this.checked = !this.checked;
-    this.ngOnChange.emit(this.checked);
+    this.checkedChange.emit(this.checked);
   }
 }