diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index dfe107d0b1fc..d1863695e259 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -100,6 +100,15 @@ describe('MdCheckbox', () => { expect(inputElement.indeterminate).toBe(false); }); + it('should change native element checked when check programmatically', () => { + expect(inputElement.checked).toBe(false); + + checkboxInstance.checked = true; + fixture.detectChanges(); + + expect(inputElement.checked).toBe(true); + }); + it('should toggle checked state on click', () => { expect(checkboxInstance.checked).toBe(false); diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 1f6f768f54ba..f3a35c192852 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -1,4 +1,5 @@ import { + ChangeDetectorRef, ChangeDetectionStrategy, Component, ElementRef, @@ -151,7 +152,9 @@ export class MdCheckbox implements ControlValueAccessor { hasFocus: boolean = false; - constructor(private _renderer: Renderer, private _elementRef: ElementRef) { + constructor(private _renderer: Renderer, + private _elementRef: ElementRef, + private _changeDetectorRef: ChangeDetectorRef) { this.color = 'accent'; } @@ -169,6 +172,7 @@ export class MdCheckbox implements ControlValueAccessor { this._checked = checked; this._transitionCheckState( this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); + this._changeDetectorRef.markForCheck(); } }