Radiobuttons

Author: EddyVerbruggen

README.md

@@ -124,6 +124,12 @@ Add the following to `app/App_Resources/Android/drawable/checkbox_grey.xml`
 </selector>
 ```
 
+## Radiobuttons, anyone?
+Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?
+
+Check out the second tab in the [Angular demo](demo-ng/), here's a screenshot:
+
+<img src="./screens/radiobuttons.png" width="225px"/>
 
 ## Demo Setup
 * npm i

demo-ng/app/item/items.component.html

@@ -1,22 +1,44 @@
 <ActionBar title="My App" class="action-bar">
 </ActionBar>
-<StackLayout class="page">
-    <StackLayout orientation="horizontal" class="p-10">
-        <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox"></CheckBox>
-        <Label text="Test NgModel" (tap)="modelCheck.toggle()"></Label>
+
+<TabView>
+
+    <!-- Tab1: Checkboxes  -->
+    <StackLayout *tabItem="{title: 'Checkboxes'}">
+        <StackLayout class="page">
+            <StackLayout orientation="horizontal" class="p-10">
+                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox"></CheckBox>
+                <Label text="Test NgModel" (tap)="modelCheck.toggle()"></Label>
+            </StackLayout>
+            <StackLayout class="form-group" [formGroup]="formGroup" orientation="horizontal" class="p-10">
+                <CheckBox #reactiveCheck class="checkbox" formControlName="testCheck" class="checkbox"></CheckBox>
+                <Label text="Test Reactive FormGroup" (tap)="reactiveCheck.toggle()"></Label>
+            </StackLayout>
+
+            <StackLayout class="p-10">
+                <Button text="Submit Values" (tap)="submit()" class="btn btn-primary"></Button>
+            </StackLayout>
+
+            <ListView [items]="items" class="list-group">
+                <ng-template let-item="item">
+                    <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
+                           class="list-group-item"></Label>
+                </ng-template>
+            </ListView>
+        </StackLayout>
     </StackLayout>
-    <StackLayout class="form-group" [formGroup]="formGroup" orientation="horizontal" class="p-10">
-        <CheckBox #reactiveCheck class="checkbox" formControlName="testCheck"  class="checkbox"></CheckBox>
-        <Label text="Test Reactive FormGroup" (tap)="reactiveCheck.toggle()"></Label>
-        
+
+    <!-- Tab2: Radiobuttons  -->
+    <StackLayout *tabItem="{title: 'Radiobuttons'}">
+        <Label class="p-10" text="Tap either the buttons or the labels. You can even unselect the radiobutton selection." textWrap="true"></Label>
+        <StackLayout class="p-10" *ngFor="let option of radioOptions">
+            <StackLayout orientation="horizontal" verticalAlignment="center">
+                <CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox"></CheckBox>
+                <StackLayout verticalAlignment="center">
+                    <Label [text]="option.text" textWrap="true" (tap)="changeCheckedRadio(option)"></Label>
+                </StackLayout>
+            </StackLayout>
+        </StackLayout>
     </StackLayout>
-    <StackLayout class="p-10">
-        <Button text="Submit Values" (tap)="submit()" class="btn btn-primary"></Button>
-    </StackLayout>
-    <ListView [items]="items" class="list-group">
-        <ng-template let-item="item">
-            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
-                class="list-group-item"></Label>
-        </ng-template>
-    </ListView>
-</StackLayout>
+
+</TabView>

demo-ng/app/item/items.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 
 import { Item } from "./item";
 import { ItemService } from "./item.service";
+import { RadioOption } from "./radio-option";
 
 @Component({
     selector: "ns-items",
@@ -13,6 +14,7 @@ export class ItemsComponent implements OnInit {
     formGroup: FormGroup;
     checkTest: boolean;
     items: Item[];
+    radioOptions?: Array<RadioOption>;
 
     constructor(
         private formBuilder: FormBuilder,
@@ -33,10 +35,32 @@ export class ItemsComponent implements OnInit {
         });
 
         this.items = this.itemService.getItems();
+
+        // Plain ol' inline Array definition coming up :)
+        this.radioOptions = [
+            new RadioOption("Radio option 1"),
+            new RadioOption("Radio option 2"),
+            new RadioOption("Radio option 3")
+        ];
     }
 
     public submit() {
         console.log('NgModel value:', this.checkTest);
         console.log('Reactive FormGroup value:', this.formGroup.get('testCheck').value);
     }
+
+    changeCheckedRadio(radioOption: RadioOption): void {
+        radioOption.selected = !radioOption.selected;
+
+        if (!radioOption.selected) {
+            return;
+        }
+
+        // uncheck all other options
+        this.radioOptions.forEach(option => {
+            if (option.text !== radioOption.text) {
+                option.selected = false;
+            }
+        });
+    }
 }

demo-ng/app/item/radio-option.ts

@@ -0,0 +1,8 @@
+export class RadioOption {
+  text: string;
+  selected: boolean = false;
+
+  constructor(text: string) {
+    this.text = text;
+  }
+}

demo-ng/package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~4.1.0",
     "@angular/router": "~4.1.0",
     "nativescript-angular": "~3.0.0",
-    "nativescript-checkbox": "file:///Users/nathan/Documents/github/bradmartin/nativescript-checkbox",
+    "nativescript-checkbox": "file:..",
     "nativescript-theme-core": "~1.0.2",
     "reflect-metadata": "~0.1.8",
     "rxjs": "~5.3.0",

package.json

@@ -56,6 +56,11 @@
       "name": "Osei Fortune",
       "email": "[email protected]",
       "url": "https://github.com/triniwiz"
+    },
+    {
+      "name": "Eddy Verbruggen",
+      "email": "[email protected]",
+      "url": "https://github.com/EddyVerbruggen"
     }
   ],
   "bugs": {