chore: added event to docs and provided angular example of usage

Author: NathanWalker

README.md

@@ -98,6 +98,10 @@ export class SomeComponent  {
 - **text** - text to use with the checkbox
 - **fillColor** - Color of the checkbox element
 
+## Events
+
+- **checkedChange** - Use a reference to the CheckBox component to grab it's `checked` property when this event fires to see the new value.
+
 ## API
 
 - **toggle()** - Change the checked state of the view to the inverse of its current state.

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

@@ -7,7 +7,7 @@
     <StackLayout *tabItem="{title: 'Checkboxes'}">
         <StackLayout class="page">
             <StackLayout orientation="horizontal" class="p-10">
-                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox"></CheckBox>
+                <CheckBox #modelCheck [(ngModel)]="checkTest" class="checkbox" (checkedChange)="checkedChange(modelCheck)"></CheckBox>
                 <Label text="Test NgModel" (tap)="modelCheck.toggle()"></Label>
             </StackLayout>
             <StackLayout class="form-group" [formGroup]="formGroup" orientation="horizontal" class="p-10">

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

@@ -6,61 +6,66 @@ import { ItemService } from "./item.service";
 import { RadioOption } from "./radio-option";
 
 @Component({
-    selector: "ns-items",
-    moduleId: module.id,
-    templateUrl: "./items.component.html",
+  selector: "ns-items",
+  moduleId: module.id,
+  templateUrl: "./items.component.html"
 })
 export class ItemsComponent implements OnInit {
-    formGroup: FormGroup;
-    checkTest: boolean;
-    items: Item[];
-    radioOptions?: Array<RadioOption>;
+  formGroup: FormGroup;
+  checkTest: boolean;
+  items: Item[];
+  radioOptions?: Array<RadioOption>;
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private itemService: ItemService
-    ) { }
+  constructor(
+    private formBuilder: FormBuilder,
+    private itemService: ItemService
+  ) {}
 
-    ngOnInit(): void {
-        this.formGroup = this.formBuilder.group({
-            testCheck: [
-                {
-                    value: true,
-                    disabled: false,
-                },
-                [
-                    Validators.required
-                ],
-            ]
-        });
+  ngOnInit(): void {
+    this.formGroup = this.formBuilder.group({
+      testCheck: [
+        {
+          value: true,
+          disabled: false
+        },
+        [Validators.required]
+      ]
+    });
 
-        this.items = this.itemService.getItems();
+    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")
-        ];
-    }
+    // 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);
-    }
+  public checkedChange(modelRef) {
+    console.log("checkedChange:", modelRef.checked);
+  }
 
-    changeCheckedRadio(radioOption: RadioOption): void {
-        radioOption.selected = !radioOption.selected;
+  public submit() {
+    console.log("NgModel value:", this.checkTest);
+    console.log(
+      "Reactive FormGroup value:",
+      this.formGroup.get("testCheck").value
+    );
+  }
 
-        if (!radioOption.selected) {
-            return;
-        }
+  changeCheckedRadio(radioOption: RadioOption): void {
+    radioOption.selected = !radioOption.selected;
 
-        // uncheck all other options
-        this.radioOptions.forEach(option => {
-            if (option.text !== radioOption.text) {
-                option.selected = false;
-            }
-        });
+    if (!radioOption.selected) {
+      return;
     }
+
+    // uncheck all other options
+    this.radioOptions.forEach(option => {
+      if (option.text !== radioOption.text) {
+        option.selected = false;
+      }
+    });
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-checkbox",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "description": "NativeScript plugin for checkbox widget.",
   "main": "checkbox",
   "typings": "index.d.ts",