fix(select): change event emitted before data binding is updated (#8740)

Fixes the select's `change` event emitting before the `value` binding has been updated, causing consumers that check the data-bound output to get a stale value.

Fixes #8739.

Author: crisbeto

src/lib/select/select.spec.ts

@@ -2371,6 +2371,29 @@ describe('MatSelect', () => {
 
       expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
     }));
+
+    it('should update the data binding before emitting the change event', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectWithoutForms);
+      const instance = fixture.componentInstance;
+      const spy = jasmine.createSpy('change spy');
+
+      fixture.detectChanges();
+      instance.select.change.subscribe(() => spy(instance.selectedFood));
+
+      expect(instance.selectedFood).toBeFalsy();
+
+      fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+      fixture.detectChanges();
+      flush();
+
+      (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+      fixture.detectChanges();
+      flush();
+
+      expect(instance.selectedFood).toBe('steak-0');
+      expect(spy).toHaveBeenCalledWith('steak-0');
+    }));
+
   });
 
   describe('positioning', () => {

src/lib/select/select.ts

@@ -896,9 +896,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     }
 
     this._value = valueToEmit;
+    this.valueChange.emit(valueToEmit);
     this._onChange(valueToEmit);
     this.selectionChange.emit(new MatSelectChange(this, valueToEmit));
-    this.valueChange.emit(valueToEmit);
     this._changeDetectorRef.markForCheck();
   }