From 504ba70abdeb7c3ecdf0eb53e5b8a23867325487 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Sep 2017 22:13:12 +0200
Subject: [PATCH] fix(autocomplete): error if panel is added asynchronously
 (#7078)

Fixes an error that was thrown when an autocomplete trigger is initialized without a panel. Note that an error will still be thrown, but only if the user attempts to open the panel.

Fixes #7069.
---
 src/lib/autocomplete/autocomplete-trigger.ts |  4 +++-
 src/lib/autocomplete/autocomplete.spec.ts    | 12 +++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index abbc2c0fbda..f1622d6c93f 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -390,7 +390,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   }
 
   private _setTriggerValue(value: any): void {
-    const toDisplay = this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
+    const toDisplay = this.autocomplete && this.autocomplete.displayWith ?
+      this.autocomplete.displayWith(value) :
+      value;
 
     // Simply falling back to an empty string if the display value is falsy does not work properly.
     // The display value can also be the number zero and shouldn't fall back to an empty string.
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 9957cf4b03b..ed23ad7f38e 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1512,6 +1512,15 @@ describe('MatAutocomplete', () => {
       }).toThrow(getMatAutocompleteMissingPanelError());
     }));
 
+    it('should not throw on init, even if the panel is not defined', fakeAsync(() => {
+      expect(() => {
+        const fixture = TestBed.createComponent(AutocompleteWithoutPanel);
+        fixture.componentInstance.control.setValue('Something');
+        fixture.detectChanges();
+        tick();
+      }).not.toThrow();
+    }));
+
     it('should hide the placeholder with a preselected form control value ' +
       'and a disabled floating placeholder', fakeAsync(() => {
         const fixture = TestBed.createComponent(AutocompleteWithFormsAndNonfloatingPlaceholder);
@@ -1885,10 +1894,11 @@ class AutocompleteWithNativeInput {
 
 
 @Component({
-  template: `<input placeholder="Choose" [matAutocomplete]="auto">`
+  template: `<input placeholder="Choose" [matAutocomplete]="auto" [formControl]="control">`
 })
 class AutocompleteWithoutPanel {
   @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
+  control = new FormControl();
 }