From fc15fa2b56c2a903dabcb0a05945b1f48a71a08b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 28 Jun 2018 21:30:21 +0200
Subject: [PATCH] fix(slide-toggle): not updating model from toggle method
 (#11846)

---
 src/lib/slide-toggle/slide-toggle.spec.ts | 28 +++++++++++++++++------
 src/lib/slide-toggle/slide-toggle.ts      |  1 +
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index 15a5e56fbb4..9c0c34fbb5f 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -50,7 +50,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,14 +251,17 @@ describe('MatSlideToggle without forms', () => {
       expect(testComponent.lastEvent.checked).toBe(true);
     }));
 
-    it('should support subscription on the change observable', () => {
-      slideToggle.change.subscribe((event: MatSlideToggleChange) => {
-        expect(event.checked).toBe(true);
-      });
+    it('should support subscription on the change observable', fakeAsync(() => {
+      const spy = jasmine.createSpy('change spy');
+      const subscription = slideToggle.change.subscribe(spy);
 
-      slideToggle.toggle();
+      labelElement.click();
       fixture.detectChanges();
-    });
+      tick();
+
+      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({checked: true}));
+      subscription.unsubscribe();
+    }));
 
     it('should show a ripple when focused by a keyboard action', fakeAsync(() => {
       expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length)
@@ -830,6 +832,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', () => {
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 8d67972f3a6..ead0370a221 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -277,6 +277,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   /** Toggles the checked state of the slide-toggle. */
   toggle(): void {
     this.checked = !this.checked;
+    this.onChange(this.checked);
   }
 
   /** Function is called whenever the focus changes for the input element. */