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",