Properly mark component for check

Author: devversion

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

@@ -606,6 +606,31 @@ describe('MdSlideToggle with forms', () => {
       expect(slideToggle.checked).toBe(true);
       expect(slideToggleElement.classList).toContain('mat-checked');
     }));
+
+    it('should update checked state on click if control is checked initially', fakeAsync(() => {
+      fixture = TestBed.createComponent(SlideToggleWithModel);
+      slideToggle = fixture.debugElement.query(By.directive(MdSlideToggle)).componentInstance;
+      labelElement = fixture.debugElement.query(By.css('label')).nativeElement;
+
+      fixture.componentInstance.modelValue = true;
+      fixture.detectChanges();
+
+      // Flush the microtasks because the forms module updates the model state asynchronously.
+      flushMicrotasks();
+
+      // 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(slideToggle.checked)
+        .toBe(true, 'Expected slide-toggle to be checked initially');
+
+      labelElement.click();
+      fixture.detectChanges();
+
+      expect(slideToggle.checked)
+        .toBe(false, 'Expected slide-toggle to be no longer checked after label click.');
+    }));
   });
 
   describe('with a FormControl', () => {

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

@@ -83,6 +83,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
   private _uniqueId: string = `md-slide-toggle-${++nextUniqueId}`;
   private _slideRenderer: SlideToggleRenderer;
   private _required: boolean = false;
+  private _checked: boolean = false;
   private _disableRipple: boolean = false;
 
   /** Reference to the focus state ripple. */
@@ -101,7 +102,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 = null;
@@ -119,6 +119,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>();