diff --git a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html index 123e4ef6ae..e64a589179 100644 --- a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html +++ b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html @@ -70,7 +70,7 @@

Ionic Without Radio Group

- + Home diff --git a/packages/angular/demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts new file mode 100644 index 0000000000..1086c8a46e --- /dev/null +++ b/packages/angular/demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts @@ -0,0 +1,74 @@ +import { + Directive, + ElementRef, + HostListener, + Input, + Renderer2 +} from '@angular/core'; +import { + ControlValueAccessor, + DefaultValueAccessor, + NgControl, + 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({ + /* tslint:disable-next-line:directive-selector */ + selector: 'ion-radio', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: IonRadioValueAccessorDirective, + multi: true + } + ] +}) +export class IonRadioValueAccessorDirective implements ControlValueAccessor { + @Input() value: any; + @Input() name: string; + + onChange: (value: any) => void; + onTouched: () => void; + + constructor(private element: ElementRef, private renderer: Renderer2) { + this.onChange = () => {}; + this.onTouched = () => {}; + } + + writeValue(value: any) { + this.renderer.setProperty( + this.element.nativeElement, + 'checked', + value === this.value + ); + } + + @HostListener('ionSelect', ['$event.target.checked']) + _handleIonSelect(value: any) { + this.onChange(value); + } + + @HostListener('ionBlur') + _handleBlurEvent() { + this.onTouched(); + } + + registerOnChange(fn: (value: any) => void): void { + this.onChange = () => { + fn(this.value); + }; + } + + registerOnTouched(fn: () => void): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.renderer.setProperty( + this.element.nativeElement, + 'disabled', + isDisabled + ); + } +} diff --git a/packages/angular/demo/src/app/shared/shared.module.ts b/packages/angular/demo/src/app/shared/shared.module.ts index 7053eb9047..06eb886f0e 100644 --- a/packages/angular/demo/src/app/shared/shared.module.ts +++ b/packages/angular/demo/src/app/shared/shared.module.ts @@ -1,11 +1,22 @@ import { NgModule } from '@angular/core'; import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive'; +import { IonRadioValueAccessorDirective } from './ion-radio-value-accessor/ion-radio-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, IonSelectValueAccessorDirective, IonTextValueAccessorDirective], - declarations: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective] + exports: [ + IonBooleanValueAccessorDirective, + IonRadioValueAccessorDirective, + IonSelectValueAccessorDirective, + IonTextValueAccessorDirective + ], + declarations: [ + IonBooleanValueAccessorDirective, + IonRadioValueAccessorDirective, + IonSelectValueAccessorDirective, + IonTextValueAccessorDirective + ] }) -export class SharedModule { } +export class SharedModule {} diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 5998497ae5..ddcf6341a7 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -3,6 +3,7 @@ "version": "0.0.2-2", "lockfileVersion": 1, "requires": true, + "lockfileVersion": 1, "dependencies": { "@angular/common": { "version": "5.0.1", @@ -3253,8 +3254,7 @@ "typescript": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.4.2.tgz", - "integrity": "sha1-+DlfhdRZJ2BnyYiqQYN6j4KHCEQ=", - "dev": true + "integrity": "sha1-+DlfhdRZJ2BnyYiqQYN6j4KHCEQ=" }, "uglify-es": { "version": "3.1.6",