diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index 345dcb5e418c..57b5a8555674 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -563,7 +563,8 @@ describe('MdSlideToggle with forms', () => { declarations: [ SlideToggleWithForm, SlideToggleWithModel, - SlideToggleWithFormControl + SlideToggleWithFormControl, + SlideToggleWithModelAndChangeEvent, ] }); @@ -795,6 +796,24 @@ describe('MdSlideToggle with forms', () => { expect(testComponent.isSubmitted).toBe(true); }); }); + + describe('with model and change event', () => { + it('should report changes to NgModel before emitting change event', () => { + const fixture = TestBed.createComponent(SlideToggleWithModelAndChangeEvent); + fixture.detectChanges(); + + const labelEl = fixture.debugElement.query(By.css('label')).nativeElement; + + spyOn(fixture.componentInstance, 'onChange').and.callFake(() => { + expect(fixture.componentInstance.checked) + .toBe(true, 'Expected the model value to have changed before the change event fired.'); + }); + + labelEl.click(); + + expect(fixture.componentInstance.onChange).toHaveBeenCalledTimes(1); + }); + }); }); @Component({ @@ -873,3 +892,11 @@ class SlideToggleWithTabindexAttr {} class SlideToggleWithoutLabel { label: string; } + +@Component({ + template: `` +}) +class SlideToggleWithModelAndChangeEvent { + checked: boolean; + onChange: () => void = () => {}; +} diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 8b5d13de0d04..0c4eec296d10 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -247,8 +247,8 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, let event = new MdSlideToggleChange(); event.source = this; event.checked = this.checked; - this.change.emit(event); this.onChange(this.checked); + this.change.emit(event); } _onDragStart() {