#176 Override emitChangeEvent to use specialized change class

Author: esuau

src/switch/switch.component.spec.ts

@@ -1,18 +1,15 @@
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
-import { DebugElement } from "@angular/core";
 import { StaticIconModule } from "../icon/static-icon.module";
 
-import { Switch } from "./switch.component";
-import { Checkbox } from "../checkbox/checkbox.module";
+import { Switch, SwitchChange } from "./switch.component";
 
 describe("Switch", () => {
 	let component: Switch;
 	let fixture: ComponentFixture<Switch>;
 	let labelElement: HTMLElement;
 	let buttonElement: HTMLElement;
-	let svgElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -70,4 +67,11 @@ describe("Switch", () => {
 		expect(buttonElement.attributes.getNamedItem("aria-checked").value).toEqual("true");
 	});
 
+	it("should emit SwitchChange event", (done: any) => {
+		component.change.subscribe((data: any) => {
+			expect(data instanceof SwitchChange).toEqual(true);
+			done();
+		});
+		component.emitChangeEvent();
+	});
 });

src/switch/switch.component.ts

@@ -2,7 +2,9 @@ import { Checkbox } from "../checkbox/checkbox.component";
 import {
 	ChangeDetectorRef,
 	Component,
-	Input
+	Input,
+	Output,
+	EventEmitter
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -101,6 +103,12 @@ export class Switch extends Checkbox {
 	 */
 	id = "switch-" + Switch.switchCount;
 
+	/**
+	 * Emits event notifying other classes when a change in state occurs on a switch after a
+	 * click.
+	 */
+	@Output() change = new EventEmitter<SwitchChange>();
+
 	/**
 	 * Creates an instance of Switch.
 	 */
@@ -110,4 +118,17 @@ export class Switch extends Checkbox {
 
 		console.warn("`ibm-switch` has been deprecated in favour of `ibm-toggle`");
 	}
+
+	/**
+	 * Creates instance of `SwitchChange` used to propagate the change event.
+	 * @memberof To
+	 */
+	emitChangeEvent() {
+		let event = new SwitchChange();
+		event.source = this;
+		event.checked = this.checked;
+
+		this.propagateChange(this.checked);
+		this.change.emit(event);
+	}
 }

src/toggle/toggle.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core
 import { By } from "@angular/platform-browser";
 import { StaticIconModule } from "../icon/static-icon.module";
 
-import { Toggle } from "./toggle.component";
+import { Toggle, ToggleChange } from "./toggle.component";
 
 describe("Toggle", () => {
 	let component: Toggle;
@@ -67,4 +67,11 @@ describe("Toggle", () => {
 		expect(buttonElement.attributes.getNamedItem("aria-checked").value).toEqual("true");
 	});
 
+	it("should emit ToggleChange event", (done: any) => {
+		component.change.subscribe((data: any) => {
+			expect(data instanceof ToggleChange).toEqual(true);
+			done();
+		});
+		component.emitChangeEvent();
+	});
 });

src/toggle/toggle.component.ts

@@ -4,8 +4,7 @@ import {
 	Component,
 	Input,
 	Output,
-	EventEmitter,
-	ChangeDetectionStrategy
+	EventEmitter
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -113,6 +112,12 @@ export class Toggle extends Checkbox {
 	 */
 	id = "toggle-" + Toggle.toggleCount;
 
+	/**
+	 * Emits event notifying other classes when a change in state occurs on a toggle after a
+	 * click.
+	 */
+	@Output() change = new EventEmitter<ToggleChange>();
+
 	/**
 	 * Creates an instance of Toggle.
 	 * @param {ChangeDetectorRef} changeDetectorRef
@@ -122,4 +127,17 @@ export class Toggle extends Checkbox {
 		super(changeDetectorRef);
 		Toggle.toggleCount++;
 	}
+
+	/**
+	 * Creates instance of `ToggleChange` used to propagate the change event.
+	 * @memberof To
+	 */
+	emitChangeEvent() {
+		let event = new ToggleChange();
+		event.source = this;
+		event.checked = this.checked;
+
+		this.propagateChange(this.checked);
+		this.change.emit(event);
+	}
 }