From 35b6300038e6a80474fb25eae5164ffb8f574dfd Mon Sep 17 00:00:00 2001
From: Bobby Galli <bobbyg603@gmail.com>
Date: Fri, 8 Apr 2022 17:42:32 -0400
Subject: [PATCH] feat: support two-way binding (#5)

Fixes #4

BREAKING CHANGE: support two-way binding by following the pattern @Input() x, @Output() xChange from https://angular.io/guide/two-way-binding
---
 README.md                                              | 10 +++++-----
 projects/ngx-toggle-example/src/app/app.component.html |  4 ++--
 projects/ngx-toggle-example/src/app/app.component.ts   |  5 ++---
 .../components/ngx-toggle/ngx-toggle.component.spec.ts |  2 +-
 .../lib/components/ngx-toggle/ngx-toggle.component.ts  |  4 ++--
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 1666080..660363c 100644
--- a/README.md
+++ b/README.md
@@ -38,9 +38,9 @@ Add `<ngx-toggle>` to your component's template:
 ```ts
 <ngx-toggle 
     id="toggle-example"
-    [checked]="checked"
+    [(checked)]="checked"
     [disabled]="false"
-    (checkedChanged)="onCheckedChanged($event)">
+    (checkedChange)="onCheckedChanged($event)">
 </ngx-toggle>
 ```
 
@@ -56,9 +56,9 @@ Be sure to give each toggle a unique id. Failing to give each toggle a unique id
 | disabled | boolean | control is not interactable   |
 
 ### Outputs
-| Property       | Type                    | Description                                       |
-|----------------|-------------------------|---------------------------------------------------|
-| checkedChanged | EventEmitter\<boolean\> | Emits new `checked` when control has been toggled |
+| Property       | Type                    | Description                                             |
+|----------------|-------------------------|---------------------------------------------------------|
+| checkedChange  | EventEmitter\<boolean\> | Emits new `checked` value when control has been toggled |
 
 ## Attribution
 
diff --git a/projects/ngx-toggle-example/src/app/app.component.html b/projects/ngx-toggle-example/src/app/app.component.html
index b436f82..047d17d 100644
--- a/projects/ngx-toggle-example/src/app/app.component.html
+++ b/projects/ngx-toggle-example/src/app/app.component.html
@@ -9,8 +9,8 @@ <h1>ngx-toggle-example</h1>
       <div class="row">
         <div class="col-12 py-4 text-center">
           Monthly
-          <ngx-toggle id="toggle-example" [checked]="checked" [disabled]="false"
-            (checkedChanged)="onCheckedChanged($event)">
+          <ngx-toggle id="toggle-example" [(checked)]="checked" [disabled]="false"
+            (checkedChange)="onCheckedChange($event)">
           </ngx-toggle>
           Annually
         </div>
diff --git a/projects/ngx-toggle-example/src/app/app.component.ts b/projects/ngx-toggle-example/src/app/app.component.ts
index 5243623..f5a80e9 100644
--- a/projects/ngx-toggle-example/src/app/app.component.ts
+++ b/projects/ngx-toggle-example/src/app/app.component.ts
@@ -21,9 +21,8 @@ export class AppComponent {
   standardPriceParams = createNgAnimatedCounterParams(50, 50);
   premiumPriceParams = createNgAnimatedCounterParams(100, 100);
 
-  onCheckedChanged(checked: boolean): void {
-    this.checked = checked;
-
+  onCheckedChange(checked: boolean): void {
+    console.log('checked:', checked);
     if (checked) {
       this.basicPriceParams = createNgAnimatedCounterParams(25, 12);
       this.standardPriceParams = createNgAnimatedCounterParams(50, 25);
diff --git a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts
index c10660f..32faab8 100644
--- a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts
+++ b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts
@@ -73,7 +73,7 @@ describe('NgxToggleComponent', () => {
   describe('click', () => {
     it('should emit checkedChanged', async () => {
       const checked = true;
-      const resultPromise = firstValueFrom(component.checkedChanged);
+      const resultPromise = firstValueFrom(component.checkedChange);
       component.checked = !checked;
       fixture.detectChanges();
 
diff --git a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts
index 2980e79..e097efd 100644
--- a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts
+++ b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts
@@ -10,9 +10,9 @@ export class NgxToggleComponent {
   @Input() id = 'ngx-toggle';
   @Input() checked = false;
   @Input() disabled = false;
-  @Output() checkedChanged = new EventEmitter<boolean>();
+  @Output() checkedChange = new EventEmitter<boolean>();
 
   onClick(event: any): void {
-    this.checkedChanged.emit(event.target.checked);
+    this.checkedChange.emit(event.target.checked);
   }
 }