feat(demo): make custom value accessors generic

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

@@ -3,36 +3,72 @@
 </div>
 
 <ion-grid>
+
   <ion-row>
     <ion-col>
+      <h2>Text Inputs</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdTextInput">Standard Input</label>
       <input id="stdTextInput" name="stdTextInput" [(ngModel)]="stdTextInput" />
     </ion-col>
     <ion-col>
-      Entered Data: <span id="stdTextInputOutput">{{stdTextInput}}</span>
+      Standard Text Input:
+      <span id="stdTextInputOutput">{{stdTextInput}}</span>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
+      <ion-item>
+        <ion-label>Ionic Text Input</ion-label>
         <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="ionTextInput"></ion-input>
+      </ion-item>
     </ion-col>
     <ion-col>
-      Entered Data: <span id="ionTextInputOutput">{{ionTextInput}}</span>
+      Ionic Text Input:
+      <span id="ionTextInputOutput">{{ionTextInput}}</span>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Boolean Inputs</h2>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
+      <label for="stdCheckbox">Standard Checkbox</label>
       <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="stdCheckbox" (blur)="onBlur($event)" />
     </ion-col>
     <ion-col>
-      Entered Data: <span id="stdCheckboxOutput">{{stdCheckbox}}</span>
+      Standard Checkbox:
+      <span id="stdCheckboxOutput">{{stdCheckbox}}</span>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
+      <ion-item>
+        <ion-label>Ionic Checkbox</ion-label>
         <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="ionCheckbox" (ionBlur)="onBlur($event)"></ion-checkbox>
+      </ion-item>
     </ion-col>
     <ion-col>
-      Entered Data: <span id="ionCheckboxOutput">{{ionCheckbox}}</span>
+      Ionic Checkbox:
+      <span id="ionCheckboxOutput">{{ionCheckbox}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Toggle</ion-label>
+        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="ionToggle" (ionBlur)="onBlur($event)"></ion-toggle>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+      Ionic Toggle:
+      <span id="ionCheckboxOutput">{{ionToggle}}</span>
     </ion-col>
   </ion-row>
 </ion-grid>

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

@@ -13,6 +13,8 @@ export class InputsTestPageComponent implements OnInit {
   ionCheckbox = true;
   stdCheckbox = true;
 
+  ionToggle = false;
+
   constructor() {}
 
   ngOnInit() {}

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

@@ -3,10 +3,10 @@ import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@
 
 // NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
 @Directive({
-  selector: 'ion-checkbox',
+  selector: 'ion-checkbox,ion-toggle',
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonCheckboxValueAccessorDirective, multi: true }]
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }]
 })
-export class IonCheckboxValueAccessorDirective implements ControlValueAccessor {
+export class IonBooleanValueAccessorDirective implements ControlValueAccessor {
   constructor(private element: ElementRef, private renderer: Renderer2) {
     this.onChange = () => {};
     this.onTouched = () => {};

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

@@ -1,14 +1,14 @@
 import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
-import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, 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
 // May also need to look at this to see if we need anything else:
 // https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101
 @Directive({
   selector: 'ion-input',
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonInputValueAccessorDirective, multi: true }]
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }]
 })
-export class IonInputValueAccessorDirective implements ControlValueAccessor {
+export class IonTextValueAccessorDirective implements ControlValueAccessor {
   constructor(private element: ElementRef, private renderer: Renderer2) {
     this.onChange = () => {};
     this.onTouched = () => {};

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

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