Properly mark component for check

Author: devversion

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

@@ -407,14 +407,40 @@ describe('MdSlideToggle', () => {
   });
 
   describe('custom template', () => {
+
     it('should not trigger the change event on initialization', async(() => {
-      let fixture = TestBed.createComponent(SlideToggleTestApp);
+      const fixture = TestBed.createComponent(SlideToggleTestApp);
       fixture.componentInstance.slideModel = true;
       fixture.componentInstance.slideChecked = true;
       fixture.detectChanges();
 
       expect(fixture.componentInstance.lastEvent).toBeFalsy();
     }));
+
+    it('should update checked state on click if control is checked initially', async(() => {
+      const fixture = TestBed.createComponent(SlideToggleTestApp);
+      const slideToggleInstance = fixture.debugElement
+        .query(By.directive(MdSlideToggle)).componentInstance;
+      const labelElement = fixture.debugElement.query(By.css('label')).nativeElement;
+
+      fixture.componentInstance.slideModel = true;
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        // Now the new checked variable has been updated in the slide-toggle and the slide-toggle
+        // is marked for check because it still needs to update the underlying input.
+        fixture.detectChanges();
+
+        expect(slideToggleInstance.checked)
+          .toBe(true, 'Expected slide-toggle to be checked initially');
+
+        labelElement.click();
+        fixture.detectChanges();
+
+        expect(slideToggleInstance.checked)
+          .toBe(false, 'Expected slide-toggle to be no longer checked after label click.');
+      });
+    }));
   });
 
   describe('with forms', () => {

src/lib/slide-toggle/slide-toggle.ts

@@ -85,6 +85,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
   private _uniqueId = `md-slide-toggle-${++nextId}`;
   private _slideRenderer: SlideToggleRenderer = null;
   private _required: boolean = false;
+  private _checked: boolean = false;
   private _disableRipple: boolean = false;
 
   /** Reference to the focus state ripple. */
@@ -103,7 +104,6 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
   @Input() labelPosition: 'before' | 'after' = 'after';
 
   /** Whether the slide-toggle element is checked or not */
-  @Input() checked: boolean = false;
 
   /** Used to set the aria-label attribute on the underlying input element. */
   @Input('aria-label') ariaLabel: string = null;
@@ -121,6 +121,14 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
   get disableRipple(): boolean { return this._disableRipple; }
   set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
 
+  /** Whether the slide-toggle element is checked or not */
+  @Input()
+  get checked(): boolean { return this._checked; }
+  set checked(value) {
+    this._checked = !!value;
+    this._changeDetectorRef.markForCheck();
+  }
+
   /** An event will be dispatched each time the slide-toggle changes its value. */
   @Output() change: EventEmitter<MdSlideToggleChange> = new EventEmitter<MdSlideToggleChange>();