diff --git a/packages/angular/demo/README.md b/packages/angular/demo/README.md index 5edd031912..513ceb868d 100644 --- a/packages/angular/demo/README.md +++ b/packages/angular/demo/README.md @@ -4,7 +4,9 @@ The purpose of this application is to provide an Angular CLI application where I ## Getting started -From this directory: +**Note:** This application uses the locally built Ionic Core. It does not grab the latest uploaded version or anything. That allows the developer to use this application as they make changes in core. That also means that you **must** build core before building this application. So if you haven't done that yet, go do that first. + +To use _this_ application perform the following commands from this directory: - `npm i` - `npm start` - to serve the application diff --git a/packages/angular/demo/e2e/inputs.e2e-spec.ts b/packages/angular/demo/e2e/inputs.e2e-spec.ts index 64623f8529..7bf1861036 100644 --- a/packages/angular/demo/e2e/inputs.e2e-spec.ts +++ b/packages/angular/demo/e2e/inputs.e2e-spec.ts @@ -100,6 +100,14 @@ describe('Demo Inputs Page', () => { }); }); + describe('select input', () => { + it('should be set the initial value', () => { + page.navigateTo(); + const el = page.getIonicSelect(); + expect(el.getAttribute('value')).toEqual('brains'); + }); + }); + async function hasClass(el: ElementFinder, cls: string): Promise { const classes = await el.getAttribute('class'); return classes.split(' ').indexOf(cls) !== -1; diff --git a/packages/angular/demo/e2e/inputs.po.ts b/packages/angular/demo/e2e/inputs.po.ts index a8df5fa661..8ab72fea47 100644 --- a/packages/angular/demo/e2e/inputs.po.ts +++ b/packages/angular/demo/e2e/inputs.po.ts @@ -13,6 +13,14 @@ export class InputsPage { return element(by.id('checkboxOutput')).getText(); } + getIonicSelect() { + return element(by.id('ionSelect')); + } + + getSelectOutput() { + return element(by.id('selectOutput')).getText(); + } + getIonicToggle() { return element(by.id('ionToggle')); } diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.html b/packages/angular/demo/src/app/inputs/inputs-test-page.component.html index d02397e5de..f0035e8ca7 100644 --- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.html +++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.html @@ -12,7 +12,7 @@ - + Value: @@ -82,6 +82,44 @@ + + +

Select

+
+
+ + + + + + + Value: + {{selectValue}} + + + + + + Ionic Select (for tacos) + + Carne Asada + Lengua + Sesos + Tripa + Pollo + + + + + + +

Toggle

diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts b/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts index 8b183d030d..45ccd0956e 100644 --- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts +++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts @@ -13,6 +13,8 @@ export class InputsTestPageComponent implements OnInit { checkboxValue = true; toggleValue = false; + selectValue = 'brains'; + constructor() {} ngOnInit() {} diff --git a/packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts index e018abecb1..3ca6c1e105 100644 --- a/packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts +++ b/packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts @@ -3,6 +3,7 @@ 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({ + /* tslint:disable-next-line:directive-selector */ selector: 'ion-checkbox,ion-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }] }) diff --git a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts new file mode 100644 index 0000000000..81834ea82f --- /dev/null +++ b/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts @@ -0,0 +1,42 @@ +import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; +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.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158 +@Directive({ + /* tslint:disable-next-line:directive-selector */ + selector: 'ion-select', + providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }] +}) +export class IonSelectValueAccessorDirective implements ControlValueAccessor { + constructor(private element: ElementRef, private renderer: Renderer2) { + this.onChange = () => {}; + this.onTouched = () => {}; + } + + onChange: (value: any) => void; + onTouched: () => void; + + writeValue(value: any) { + this.renderer.setProperty(this.element.nativeElement, 'value', value); + } + + @HostListener('ionChange', ['$event.target.value']) + _handleChangeEvent(value: any) { + this.onChange(value); + } + + @HostListener('ionBlur') + _handleBlurEvent() { + this.onTouched(); + } + + registerOnChange(fn: (value: any) => void) { + this.onChange = fn; + } + + registerOnTouched(fn: () => void) { + this.onTouched = fn; + } +} diff --git a/packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts index e8c56cd44c..0743569d50 100644 --- a/packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts +++ b/packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts @@ -5,6 +5,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; // 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({ + /* tslint:disable-next-line:directive-selector */ selector: 'ion-input,ion-textarea', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }] }) diff --git a/packages/angular/demo/src/app/shared/shared.module.ts b/packages/angular/demo/src/app/shared/shared.module.ts index 33fbd5b499..7053eb9047 100644 --- a/packages/angular/demo/src/app/shared/shared.module.ts +++ b/packages/angular/demo/src/app/shared/shared.module.ts @@ -1,10 +1,11 @@ import { NgModule } from '@angular/core'; import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive'; +import { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive'; import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive'; @NgModule({ - exports: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective], - declarations: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective] + exports: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective], + declarations: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective] }) export class SharedModule { }