fix(slide-toggle): not updating model or dispatching change event from toggle method

Fixes the slide toggle not propagating its value to the `ControlValueAccessor` or dispatching its change event when its value is changed through the `toggle` method. It seems like we had a test for one of these cases, but it wasn't failing when it was supposed to.

Fixes #11812.

Author: crisbeto

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

@@ -49,7 +49,6 @@ describe('MatSlideToggle without forms', () => {
     let labelElement: HTMLLabelElement;
     let inputElement: HTMLInputElement;
 
-    // This initialization is async() because it needs to wait for ngModel to set the initial value.
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(SlideToggleBasic);
 
@@ -252,12 +251,14 @@ describe('MatSlideToggle without forms', () => {
     }));
 
     it('should support subscription on the change observable', () => {
-      slideToggle.change.subscribe((event: MatSlideToggleChange) => {
-        expect(event.checked).toBe(true);
-      });
+      const spy = jasmine.createSpy('change spy');
+      const subscription = slideToggle.change.subscribe(spy);
 
       slideToggle.toggle();
       fixture.detectChanges();
+
+      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({checked: true}));
+      subscription.unsubscribe();
     });
 
     it('should show a ripple when focused by a keyboard action', fakeAsync(() => {
@@ -739,6 +740,18 @@ describe('MatSlideToggle with forms', () => {
 
       expect(modelInstance.pristine).toBe(true);
     }));
+
+    it('should set the model value when toggling via the `toggle` method', fakeAsync(() => {
+      expect(testComponent.modelValue).toBe(false);
+
+      fixture.debugElement.query(By.directive(MatSlideToggle)).componentInstance.toggle();
+      fixture.detectChanges();
+      flushMicrotasks();
+
+      fixture.detectChanges();
+      expect(testComponent.modelValue).toBe(true);
+    }));
+
   });
 
   describe('with a FormControl', () => {

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

@@ -252,6 +252,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   /** Toggles the checked state of the slide-toggle. */
   toggle(): void {
     this.checked = !this.checked;
+    this._emitChangeEvent();
   }
 
   /** Function is called whenever the focus changes for the input element. */