feat(demo): add checkbox

packages/angular/demo/src/app/inputs/inputs-test-page.component.html

@@ -11,6 +11,14 @@
       Entered Data: <span id="outputOne">{{testInputOne}}</span>
     </ion-col>
   </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-checkbox id="checkboxOne" name="checkboxOne" [(ngModel)]="testCheckboxOne"></ion-checkbox>
+    </ion-col>
+    <ion-col>
+      Entered Data: <span id="outputCheckboxOne">{{testCheckboxOne}}</span>
+    </ion-col>
+  </ion-row>
 </ion-grid>
 
 <a href='home'>Home</a>

packages/angular/demo/src/app/inputs/inputs-test-page.component.ts

@@ -7,6 +7,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class InputsTestPageComponent implements OnInit {
+  testCheckboxOne = true;
   testInputOne = 'This is data for test input one';
 
   constructor() {}

packages/angular/demo/src/app/shared/ion-checkbox-value-accessor.directive.ts

@@ -0,0 +1,40 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
+@Directive({
+  selector: 'ion-checkbox',
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonCheckboxValueAccessorDirective, multi: true }]
+})
+export class IonCheckboxValueAccessorDirective implements ControlValueAccessor {
+  constructor(private element: ElementRef, private renderer: Renderer2) {
+    this.onChange = () => {};
+    this.onTouched = () => {};
+  }
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  writeValue(value: any) {
+    console.log('writeValue', value);
+    this.renderer.setProperty(this.element.nativeElement, 'checked', value);
+  }
+
+  @HostListener('change', ['$event.target.checked'])
+  _handleIonChange(value: any) {
+    console.log('handle change', value);
+    this.onChange(value);
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled);
+  }
+}

packages/angular/demo/src/app/shared/ion-input-value-accessor.directive.ts

@@ -9,24 +9,26 @@ import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@
 export class IonInputValueAccessorDirective implements ControlValueAccessor {
   constructor(private element: ElementRef, private renderer: Renderer2) {
     this.onChange = () => {};
+    this.onTouched = () => {};
   }
 
-  onChange: (value: string) => void;
+  onChange: (value: any) => void;
+  onTouched: () => void;
 
-  writeValue(value: string) {
+  writeValue(value: any) {
     this.renderer.setProperty(this.element.nativeElement, 'value', value);
   }
 
   @HostListener('input', ['$event.target.value'])
-  _handleIllyChange(value: string) {
+  _handleInputEvent(value: any) {
     this.onChange(value);
   }
 
-  registerOnChange(fn: (value: string) => void) {
+  registerOnChange(fn: (value: any) => void) {
-    this.onChange = value => {
+    this.onChange = fn;
-      fn(value);
-    };
   }
 
-  registerOnTouched() {}
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
 }

packages/angular/demo/src/app/shared/shared.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 
+import { IonCheckboxValueAccessorDirective } from './ion-checkbox-value-accessor.directive';
 import { IonInputValueAccessorDirective } from './ion-input-value-accessor.directive';
 
 @NgModule({
-  exports: [IonInputValueAccessorDirective],
+  exports: [IonCheckboxValueAccessorDirective, IonInputValueAccessorDirective],
-  declarations: [IonInputValueAccessorDirective]
+  declarations: [IonCheckboxValueAccessorDirective, IonInputValueAccessorDirective]
 })
 export class SharedModule { }