fix: update readme (#10)

* chore: update sample

* fix: update readme

README.md

@@ -1,8 +1,9 @@
 # NgxToggle
+![cd](https://github.com/bobbyg603/ngx-toggle/actions/workflows/cd.yml/badge.svg)
 
-A simple iOS style toggle switch for Angular projects.
+A simple iOS style toggle switch for Angular projects.  
 
-## Installation
+## 🏗️ Installation
 
 Install `@bobbyg603/ngx-toggle`:
 
@@ -13,6 +14,7 @@ npm i @bobbyg603/ngx-toggle
 Import the `NgxToggleModule` module in each module that uses `<ngx-toggle>`:
 
 [app.module.ts](https://github.com/bobbyg603/ngx-toggle/blob/main/projects/ngx-toggle-example/src/app/app.module.ts)
+
 ```ts
 import { NgxToggleModule } from '@bobbyg603/ngx-toggle';
 
@@ -30,23 +32,42 @@ import { NgxToggleModule } from '@bobbyg603/ngx-toggle';
 export class AppModule { }
 ```
 
-## Usage
+## 🧑‍💻 Usage
 
 Add `<ngx-toggle>` to your component's template:
 
-[app.component.ts](https://github.com/bobbyg603/ngx-toggle/blob/139148ac2d6f18f69777835686fbfd44766d58d1/projects/ngx-toggle-example/src/app/app.component.html#L12)
-```ts
+[pricing.component.html](https://github.com/bobbyg603/ngx-toggle/blob/34b5da55ec9e5adf80bfa196cddb380c9d95314d/projects/ngx-toggle-example/src/app/pricing/pricing.component.html#L4-L6)
+
+```html
 <ngx-toggle 
-    id="toggle-example"
-    [(checked)]="checked"
-    [disabled]="false"
-    (checkedChange)="onCheckedChanged($event)">
+  id="toggle-example"
+  [(checked)]="checked"
+  [disabled]="false"
+  (checkedChange)="onCheckedChange($event)">
 </ngx-toggle>
 ```
 
-Be sure to give each toggle a unique id. Failing to give each toggle a unique id will result in clicking one input toggling any inputs with a matching id.
+Be sure to give each toggle a unique `id`. Failing to give each toggle a unique id will result in clicking one input toggling any inputs with a matching id.
+
+You can also use `<ngx-toggle>` as a [FormControl](https://angular.io/api/forms/FormControl):
+
+[checkout.component.html](https://github.com/bobbyg603/ngx-toggle/blob/1781fc109e1879c64c24bd82d249539911ec7587/projects/ngx-toggle-example/src/app/checkout/checkout.component.html#L71)
+
+```html
+<form [formGroup]="formGroup">
+  <ngx-toggle class="ms-auto" formControlName="saveForNextTime"></ngx-toggle>
+</form>
+```
+
+[checkout.component.ts](https://github.com/bobbyg603/ngx-toggle/blob/1781fc109e1879c64c24bd82d249539911ec7587/projects/ngx-toggle-example/src/app/checkout/checkout.component.ts#L10-L19)
+```ts
+formGroup = new FormGroup({
+  saveForNextTime: new FormControl(false)
+});
+```
+
 
-## API
+## 🧩 API
 
 ### Inputs
 | Property | Type    | Description                   |
@@ -60,6 +81,6 @@ Be sure to give each toggle a unique id. Failing to give each toggle a unique id
 |----------------|-------------------------|---------------------------------------------------------|
 | checkedChange  | EventEmitter\<boolean\> | Emits new `checked` value when control has been toggled |
 
-## Attribution
+## 🤝 Attribution
 
-The `ngx-toggle-example` layout was inspired by Benjamin King's [Pricing Cards](https://codepen.io/bballinben/pen/wyLjvm) codepen.
+The `ngx-toggle-example` layout was inspired by Benjamin King's [Pricing Cards](https://codepen.io/bballinben/pen/wyLjvm) codepen.

projects/ngx-toggle-example/src/app/checkout/checkout.component.html

@@ -68,7 +68,7 @@ <h4 class="mb-3">Billing address</h4>
 
             <div class="col-12 d-flex">
                 <label class="form-check-label" for="save-info">Save this information for next time?</label>
-                <ngx-toggle class="ms-auto" formControlName="saveForNextTime"></ngx-toggle>
+                <ngx-toggle id="save-for-next-time" class="ms-auto" formControlName="saveForNextTime"></ngx-toggle>
             </div>
 
             <hr class="my-4">