diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 81d6b00821d..df0cee6dd01 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 d086326f341..6860b9a7de1 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -1,4 +1,5 @@ import { + ChangeDetectorRef, ChangeDetectionStrategy, Component, ElementRef, @@ -156,7 +157,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'; } @@ -174,6 +177,7 @@ export class MdCheckbox implements ControlValueAccessor { this._checked = checked; this._transitionCheckState( this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); + this._changeDetectorRef.markForCheck(); } }