Add Change Event to ngx-toggle Component (#1050)

* Added change event to ngx-toggle * removed unnecessary event handler on demo page * removed browseranimationsmodule import causing cypress tests to break
swimlane · Sep 17, 2024 · 3dbc763 · 3dbc763
1 parent 3225123
commit 3dbc763
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.html b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.html
@@ -11,11 +11,11 @@
     [name]="name"
     (blur)="onBlur()"
   />
-  <label [attr.for]="id" class="ngx-toggle-label" >
+  <label [attr.for]="id" class="ngx-toggle-label">
     <span *ngIf="showIcons && value" class="ngx-icon ngx-check"></span>
     <span *ngIf="showIcons && !value" class="ngx-icon ngx-x"></span>
   </label>
-  <label [attr.for]="id" class="ngx-toggle-text" >
+  <label [attr.for]="id" class="ngx-toggle-text">
     <span *ngIf="label" [innerHTML]="label"></span>
     <ng-content></ng-content>
   </label>

diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.spec.ts
@@ -131,4 +131,12 @@ describe('ToggleComponent', () => {
 
     expect(component.value).toEqual(false);
   });
+
+  it('emitChange should emit the change event', () => {
+    spyOn(component.change, 'emit');
+
+    component['emitChange']();
+
+    expect(component.change.emit).toHaveBeenCalled();
+  });
 });
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.ts b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.ts
@@ -5,7 +5,9 @@ import {
   forwardRef,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  HostListener
+  HostListener,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -36,6 +38,7 @@ export class ToggleComponent implements ControlValueAccessor {
     ev.preventDefault();
     if (!this.disabled) {
       this.toggle();
+      this.emitChange();
     }
   }
 
@@ -76,6 +79,8 @@ export class ToggleComponent implements ControlValueAccessor {
     this._tabIndex = coerceNumberProperty(tabIndex);
   }
 
+  @Output() change = new EventEmitter<Event>();
+
   get value(): boolean {
     return this._value;
   }
@@ -138,4 +143,8 @@ export class ToggleComponent implements ControlValueAccessor {
   private onChangeCallback = (_: unknown) => {
     // placeholder
   };
+
+  private emitChange() {
+    this.change.emit({ stopPropagation: () => {}, target: { checked: this._value } } as any);
+  }
 }
diff --git a/src/app/forms/toggle-page/toggle-page.component.html b/src/app/forms/toggle-page/toggle-page.component.html
@@ -3,60 +3,45 @@ <h3 class="style-header">Toggle</h3>
 <ngx-tabs>
   <ngx-tab label="Examples">
     <ngx-section class="shadow" [sectionTitle]="'Demo'">
-      <ngx-toggle name="toggle1" [(ngModel)]="toggleChk" [label]="'High Priority'">
-      </ngx-toggle>
+      <ngx-toggle name="toggle1" [(ngModel)]="toggleChk" [label]="'High Priority'"> </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle
-      name="toggle1"
-      [(ngModel)]="toggleChk"
-      [label]="'High Priority'">
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle1" [(ngModel)]="toggleChk" [label]="'High Priority'"> </ngx-toggle>]]>
       </app-prism>
       <br />
       <br />
-
-      <ngx-toggle name="toggle2" [disabled]="true" [label]="'Disabled'">
-      </ngx-toggle>
+
+      <ngx-toggle name="toggle2" [disabled]="true" [label]="'Disabled'"> </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle
-      name="toggle2"
-      [disabled]="true"
-      [label]="'Disabled'">
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle2" [disabled]="true" [label]="'Disabled'"> </ngx-toggle>]]>
       </app-prism>
       <br />
       <br />
-    
+
       <ngx-toggle name="toggle3" [(ngModel)]="toggleChk" (ngModelChange)="onToggleChange($event)">
         <strong class="color-red" [hidden]="!toggleChk">Alert Everyone!</strong>
         <strong class="color-green" [hidden]="toggleChk">All good!</strong>
       </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle name="toggle3" [(ngModel)]="toggleChk" (ngModelChange)="onToggleChange($event)">
-      <strong class="color-red" [hidden]="!toggleChk">Alert Everyone!</strong>
-      <strong class="color-green" [hidden]="toggleChk">All good!</strong>
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle3" [(ngModel)]="toggleChk" (ngModelChange)="onToggleChange($event)"> <strong
+        class="color-red" [hidden]="!toggleChk">Alert Everyone!</strong> <strong class="color-green"
+        [hidden]="toggleChk">All good!</strong> </ngx-toggle>]]>
       </app-prism>
       <br />
       <br />
-    
+
       <ngx-toggle name="toggle4" [(ngModel)]="toggleChk" [label]="'High Priority With No Icons'" [showIcons]="false">
       </ngx-toggle>
       <app-prism>
-    <![CDATA[<ngx-toggle 
-      name="toggle4" 
-      [(ngModel)]="toggleChk" 
-      [label]="'High Priority With No Icons'" 
-      [showIcons]="false">
-    </ngx-toggle>]]>
+        <![CDATA[<ngx-toggle name="toggle4" [(ngModel)]="toggleChk" [label]="'High Priority With No Icons'"
+        [showIcons]="false"> </ngx-toggle>]]>
       </app-prism>
     </ngx-section>
   </ngx-tab>
   <ngx-tab label="API">
     <h3>Table of Contents</h3>
     <a class="documentation-content" (click)="scrollTo('inputs')">Component Inputs</a>
     <a class="documentation-content" (click)="scrollTo('outputs')">Component Outputs</a>
-    <hr>
+    <hr />
 
     <h3 class="style-header" id="inputs">Component Inputs</h3>
     <table class="table documentation-table">
@@ -118,8 +103,24 @@ <h3 class="style-header" id="inputs">Component Inputs</h3>
         </tr>
       </tbody>
     </table>
-    <hr>
+    <hr />
     <h3 class="style-header" id="outputs">Component Outputs</h3>
-    <h4>No component outputs to display.</h4>
+    <table class="table documentation-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>
+            <code class="component-type">&#64;Output()</code>
+            <code>change: EventEmitter&lt;Event&gt;</code>
+          </th>
+          <td>Event emitted when the value is changed.</td>
+        </tr>
+      </tbody>
+    </table>
   </ngx-tab>
-</ngx-tabs>
+</ngx-tabs>