diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts index c7103d313861..4eb2a37a2a61 100644 --- a/src/components/checkbox/checkbox.spec.ts +++ b/src/components/checkbox/checkbox.spec.ts @@ -621,6 +621,29 @@ export function main() { let el = fixture.debugElement.query(By.css('.md-checkbox')); expect(el.nativeElement.className).not.toMatch(/^md\-checkbox\-anim/g); }); + + describe('when interacted with from the initial state', function() { + beforeEach(function(done: any) { + builder.createAsync(CheckboxBarebonesController).then(function(f) { + fixture = f; + controller = fixture.componentInstance; + fixture.detectChanges(); + }).then(done).catch(done.fail); + }); + + it('applies a transition class when checked', function() { + let el = fixture.debugElement.query(By.css('.md-checkbox')); + click(el, fixture); + expect(el.nativeElement.className).toContain('md-checkbox-anim-unchecked-checked'); + }); + + it('applies a transition class when made indeterminate', function() { + let el = fixture.debugElement.query(By.css('.md-checkbox')); + controller.isIndeterminate = true; + fixture.detectChanges(); + expect(el.nativeElement.className).toContain('md-checkbox-anim-unchecked-indeterminate'); + }); + }); }); }); } @@ -783,3 +806,12 @@ class CheckboxFormcontrolController { directives: [MdCheckbox] }) class CheckboxEndAlignedController {} + +@Component({ + selector: 'checkbox-barebones-controller', + template: ``, + directives: [MdCheckbox] +}) +class CheckboxBarebonesController { + public isIndeterminate: boolean = false; +} diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 0ddead691e23..40c616adbef1 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -246,7 +246,14 @@ export class MdCheckbox implements ControlValueAccessor { switch (oldState) { case TransitionCheckState.Init: - return ''; + // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or + // [checked] bound to it. + if (newState === TransitionCheckState.Checked) { + animSuffix = 'unchecked-checked'; + } else { + return ''; + } + break; case TransitionCheckState.Unchecked: animSuffix = newState === TransitionCheckState.Checked ? 'unchecked-checked' : 'unchecked-indeterminate';