feat(demo): add a sample value accessor so we don't have to use

ngDefaultControl

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

@@ -5,7 +5,7 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <ion-input id="inputOne" [(ngModel)]="testInputOne" ngDefaultControl></ion-input>
+      <ion-input id="inputOne" name="inputOne" [(ngModel)]="testInputOne"></ion-input>
     </ion-col>
     <ion-col>
       Entered Data: <span id="outputOne">{{testInputOne}}</span>

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

@@ -1,5 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { InputsTestPageComponent } from './inputs-test-page.component';
 
@@ -25,4 +26,21 @@ describe('InputsTestPageComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('testInputOne', () => {
+    let input;
+    beforeEach(
+      fakeAsync(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+        tick();
+        const ionInput = fixture.debugElement.query(By.css('#inputOne'));
+        input = ionInput.query(By.css('input')).nativeElement;
+      })
+    );
+
+    it('should reflect changes to the input', () => {
+      expect(input).toBeTruthy();
+    });
+  });
 });

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

@@ -12,4 +12,8 @@ export class InputsTestPageComponent implements OnInit {
   constructor() {}
 
   ngOnInit() {}
+
+  changed(evt) {
+    console.log(evt);
+  }
 }

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

@@ -3,10 +3,11 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { InputsTestPageComponent } from './inputs-test-page.component';
 
+import { SharedModule } from '../shared/shared.module';
 import { InputsRoutingModule } from './inputs-routing.module';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, InputsRoutingModule],
+  imports: [CommonModule, FormsModule, InputsRoutingModule, SharedModule],
   declarations: [InputsTestPageComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

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

@@ -0,0 +1,32 @@
+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-input',
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonInputValueAccessorDirective, multi: true }]
+})
+export class IonInputValueAccessorDirective implements ControlValueAccessor  {
+  constructor(private element: ElementRef, private renderer: Renderer2) {
+    this.onChange = () => {};
+  }
+
+  onChange: (value: string) => void;
+
+  writeValue(value: string) {
+    this.renderer.setProperty(this.element.nativeElement, 'value', value);
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  _handleIllyChange(value: string) {
+    this.onChange(value);
+  }
+
+  registerOnChange(fn: (value: string) => void) {
+    this.onChange = value => {
+      fn(value);
+    };
+  }
+
+  registerOnTouched() {}
+}

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

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