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

Fixes the `SbbSelect.value` property not being in sync
with the `ControlValueAccessor` initial value on init.

angular/components#18443

Author: jeripeierSBB

src/angular/select/select/select.spec.ts

@@ -334,6 +334,7 @@ class BasicSelectOnPush {
   `,
 })
 class BasicSelectOnPushPreselected {
+  @ViewChild(SbbSelect) select: SbbSelect;
   foods: any[] = [
     { value: 'steak-0', viewValue: 'Steak' },
     { value: 'pizza-1', viewValue: 'Pizza' },
@@ -3769,6 +3770,15 @@ describe('SbbSelect', () => {
 
       expect(select.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('when resetting the value by setting null or undefined', () => {

src/angular/select/select/select.ts

@@ -855,7 +855,11 @@ export class SbbSelect
     // 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();
     });
   }