fix(autocomplete): handle optionSelections being accessed early

Currently the `MatAutocompleteTrigger` will throw if `optionSelections` is accessed before `ngAfterViewInit`. These changes add a fallback stream that will be replaced once everything is initialized.

Fixes #4616.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -201,7 +201,15 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
 
   /** Stream of autocomplete option selections. */
   get optionSelections(): Observable<MatOptionSelectionChange> {
-    return merge(...this.autocomplete.options.map(option => option.onSelectionChange));
+    if (this.autocomplete && this.autocomplete.options) {
+      return merge(...this.autocomplete.options.map(option => option.onSelectionChange));
+    }
+
+    // If the property is accessed before `ngAfterViewInit`, the `autocomplete` will be undefined.
+    // Return a stream that we'll replace with the real one once everything is in place.
+    return this._zone.onStable
+      .asObservable()
+      .pipe(take(1), switchMap(() => this.optionSelections));
   }
 
   /** The currently active option, coerced to MatOption type. */

src/lib/autocomplete/autocomplete.spec.ts

@@ -21,7 +21,7 @@ import {
 } from '@angular/core';
 import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatOption} from '@angular/material/core';
+import {MatOption, MatOptionSelectionChange} from '@angular/material/core';
 import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -1324,6 +1324,42 @@ describe('MatAutocomplete', () => {
         componentOptions.slice(1).forEach(option => expect(option.deselect).not.toHaveBeenCalled());
       });
     }));
+
+    it('should emit an event when an option is selected', fakeAsync(() => {
+      const spy = jasmine.createSpy('option selection spy');
+      const subscription = fixture.componentInstance.trigger.optionSelections.subscribe(spy);
+      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+      option.click();
+      fixture.detectChanges();
+
+      expect(spy).toHaveBeenCalledWith(jasmine.any(MatOptionSelectionChange));
+    }));
+
+    it('should handle `optionSelections` being accessed too early', async(() => {
+      fixture.destroy();
+      fixture = TestBed.createComponent(SimpleAutocomplete);
+
+      let spy = jasmine.createSpy('option selection spy');
+      let subscription: Subscription;
+
+      expect(fixture.componentInstance.trigger.autocomplete).toBeFalsy();
+      expect(() => {
+        subscription = fixture.componentInstance.trigger.optionSelections.subscribe(spy);
+      }).not.toThrow();
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+        option.click();
+        fixture.detectChanges();
+
+        expect(spy).toHaveBeenCalledWith(jasmine.any(MatOptionSelectionChange));
+      });
+    }));
+
   });
 
   describe('panel closing', () => {