fix(slide-toggle): report change to model before firing a change event (#7076)

Whenever the value of the slide-toggle changes through interaction, a `change` event will be emitted. The value change then will be reported to the `ControlValueAccessor` which fires the `ngModelChange` output.

Right now the `ngModelChange` output fires after the normal `change` output. This should be the other way around because developers expect the two-way data binding to already reflect the change.

Fixes #7074

Author: devversion

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

@@ -563,7 +563,8 @@ describe('MatSlideToggle with forms', () => {
       declarations: [
         SlideToggleWithForm,
         SlideToggleWithModel,
-        SlideToggleWithFormControl
+        SlideToggleWithFormControl,
+        SlideToggleWithModelAndChangeEvent,
       ]
     });
 
@@ -795,6 +796,24 @@ describe('MatSlideToggle 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: `<md-slide-toggle [(ngModel)]="checked" (change)="onChange()"></md-slide-toggle>`
+})
+class SlideToggleWithModelAndChangeEvent {
+  checked: boolean;
+  onChange: () => void = () => {};
+}

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

@@ -251,8 +251,8 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
     let event = new MatSlideToggleChange();
     event.source = this;
     event.checked = this.checked;
-    this.change.emit(event);
     this.onChange(this.checked);
+    this.change.emit(event);
   }
 
   _onDragStart() {