fix(): slide-toggle should only emit events if native input emitted one.

Author: devversion

src/components/slide-toggle/slide-toggle.spec.ts

@@ -129,11 +129,11 @@ describe('MdSlideToggle', () => {
       expect(testComponent.onSlideClick).toHaveBeenCalledTimes(1);
     });
 
-    it('should not trigger the change event multiple times', async(() => {
+    it('should trigger the change event properly', async(() => {
       expect(inputElement.checked).toBe(false);
       expect(slideToggleElement.classList).not.toContain('md-checked');
 
-      testComponent.slideChecked = true;
+      labelElement.click();
       fixture.detectChanges();
 
       expect(inputElement.checked).toBe(true);
@@ -142,11 +142,33 @@ describe('MdSlideToggle', () => {
       // Wait for the fixture to become stable, because the EventEmitter for the change event,
       // will only fire after the zone async change detection has finished.
       fixture.whenStable().then(() => {
+        // The change event shouldn't fire, because the value change was not caused
+        // by any interaction.
         expect(testComponent.onSlideChange).toHaveBeenCalledTimes(1);
       });
 
     }));
 
+    it('should not trigger the change event by changing the native value', async(() => {
+      expect(inputElement.checked).toBe(false);
+      expect(slideToggleElement.classList).not.toContain('md-checked');
+
+      testComponent.slideChecked = true;
+      fixture.detectChanges();
+
+      expect(inputElement.checked).toBe(true);
+      expect(slideToggleElement.classList).toContain('md-checked');
+
+      // Wait for the fixture to become stable, because the EventEmitter for the change event,
+      // will only fire after the zone async change detection has finished.
+      fixture.whenStable().then(() => {
+        // The change event shouldn't fire, because the value change was not caused
+        // by any interaction.
+        expect(testComponent.onSlideChange).not.toHaveBeenCalled();
+      });
+
+    }));
+
     it('should not trigger the change event on initialization', async(() => {
       expect(inputElement.checked).toBe(false);
       expect(slideToggleElement.classList).not.toContain('md-checked');
@@ -160,7 +182,8 @@ describe('MdSlideToggle', () => {
       // Wait for the fixture to become stable, because the EventEmitter for the change event,
       // will only fire after the zone async change detection has finished.
       fixture.whenStable().then(() => {
-        expect(testComponent.onSlideChange).toHaveBeenCalledTimes(1);
+        // The change event shouldn't fire, because the native input element is not focused.
+        expect(testComponent.onSlideChange).not.toHaveBeenCalled();
       });
 
     }));

src/components/slide-toggle/slide-toggle.ts

@@ -6,8 +6,7 @@ import {
   ChangeDetectionStrategy,
   Input,
   Output,
-  EventEmitter,
-  AfterContentInit
+  EventEmitter
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -46,7 +45,7 @@ let nextId = 0;
   providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
+export class MdSlideToggle implements ControlValueAccessor {
 
   private onChange = (_: any) => {};
   private onTouched = () => {};
@@ -57,7 +56,6 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   private _color: string;
   private _hasFocus: boolean = false;
   private _isMousedown: boolean = false;
-  private _isInitialized: boolean = false;
 
   @Input() @BooleanFieldValue() disabled: boolean = false;
   @Input() name: string = null;
@@ -76,14 +74,6 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
               private _renderer: Renderer) {
   }
 
-  /** TODO: internal */
-  ngAfterContentInit() {
-    // Mark this component as initialized in AfterContentInit because the initial checked value can
-    // possibly be set by NgModel or the checked attribute. This would cause the change event to
-    // be emitted, before the component is actually initialized.
-    this._isInitialized = true;
-  }
-
   /**
    * The onChangeEvent method will be also called on click.
    * This is because everything for the slide-toggle is wrapped inside of a label,
@@ -98,6 +88,11 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
 
     if (!this.disabled) {
       this.toggle();
+
+      // Emit our custom change event if the native input emitted one.
+      // It is important to only emit it, if the native input triggered one, because
+      // we don't want to trigger a change event, when the `checked` variable changes for example.
+      this._emitChangeEvent();
     }
   }
 
@@ -173,12 +168,6 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     if (this.checked !== !!value) {
       this._checked = value;
       this.onChange(this._checked);
-
-      // Only fire a change event if the `slide-toggle` is completely initialized and
-      // all attributes / inputs are properly loaded.
-      if (this._isInitialized) {
-        this._emitChangeEvent();
-      }
     }
   }