fix(select): component value not in sync with control value on init

src/material/select/select.spec.ts

@@ -2789,6 +2789,16 @@ describe('MatSelect', () => {
 
       expect(trigger.textContent).not.toContain('Pizza');
     }));
+
+    it('should sync up the form control value with the component value', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectOnPushPreselected);
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.control.value).toBe('pizza-1');
+      expect(fixture.componentInstance.select.value).toBe('pizza-1');
+    }));
+
   });
 
   describe('with custom trigger', () => {
@@ -4723,6 +4733,7 @@ class BasicSelectOnPush {
   `
 })
 class BasicSelectOnPushPreselected {
+  @ViewChild(MatSelect) select: MatSelect;
   foods: any[] = [
     { value: 'steak-0', viewValue: 'Steak' },
     { value: 'pizza-1', viewValue: 'Pizza' },

src/material/select/select.ts

@@ -866,7 +866,11 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     // Defer setting the value in order to avoid the "Expression
     // has changed after it was checked" errors from Angular.
     Promise.resolve().then(() => {
-      this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);
+      if (this.ngControl) {
+        this._value = this.ngControl.value;
+      }
+
+      this._setSelectionByValue(this._value);
       this.stateChanges.next();
     });
   }