fix(autocomplete): update template when changing autocomplete in trigger

src/lib/autocomplete/autocomplete-trigger.ts

@@ -30,7 +30,6 @@ import {
   NgZone,
   OnDestroy,
   Optional,
-  ViewContainerRef,
 } from '@angular/core';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@@ -117,7 +116,6 @@ export function getMatAutocompleteMissingPanelError(): Error {
 })
 export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   private _overlayRef: OverlayRef | null;
-  private _portal: TemplatePortal;
   private _componentDestroyed = false;
   private _autocompleteDisabled = false;
   private _scrollStrategy: () => ScrollStrategy;
@@ -132,7 +130,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   private _manuallyFloatingLabel = false;
 
   /** The subscription for closing actions (some are bound to document). */
-  private _closingActionsSubscription: Subscription;
+  private _closingActionsSubscription = Subscription.EMPTY;
 
   /** Subscription to viewport size changes. */
   private _viewportSubscription = Subscription.EMPTY;
@@ -144,6 +142,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
    */
   private _canOpenOnNextFocus = true;
 
+  private _currentPortalAttached: TemplatePortal;
+
   /** Stream of keyboard events that can close the panel. */
   private readonly _closeKeyEventStream = new Subject<void>();
 
@@ -190,8 +190,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     this._autocompleteDisabled = coerceBooleanProperty(value);
   }
 
-  constructor(private _element: ElementRef<HTMLInputElement>, private _overlay: Overlay,
-              private _viewContainerRef: ViewContainerRef,
+  constructor(private _element: ElementRef<HTMLInputElement>,
+              private _overlay: Overlay,
               private _zone: NgZone,
               private _changeDetectorRef: ChangeDetectorRef,
               @Inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY) scrollStrategy: any,
@@ -570,7 +570,6 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     }
 
     if (!this._overlayRef) {
-      this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef);
       this._overlayRef = this._overlay.create(this._getOverlayConfig());
 
       // Use the `keydownEvents` in order to take advantage of
@@ -596,9 +595,19 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       this._overlayRef.updateSize({width: this._getPanelWidth()});
     }
 
-    if (this._overlayRef && !this._overlayRef.hasAttached()) {
-      this._overlayRef.attach(this._portal);
+    if (this._currentPortalAttached !== this.autocomplete._portal) {
+      if (this._overlayRef.hasAttached()) {
+        // There might already be a portal attached, so detach first
+        this._overlayRef.detach();
+
+        // Need be unsubscribe of old portal subscriptions
+        this._closingActionsSubscription.unsubscribe();
+      }
+
+      this._overlayRef.attach(this.autocomplete._portal);
+      this._currentPortalAttached = this.autocomplete._portal;
       this._closingActionsSubscription = this._subscribeToClosingActions();
+
     }
 
     const wasOpen = this.panelOpen;

src/lib/autocomplete/autocomplete.spec.ts

@@ -2221,6 +2221,38 @@ describe('MatAutocomplete', () => {
     expect(formControl.value).toBe('Cal', 'Expected new value to be propagated to model');
   }));
 
+  it('should work when dynamically changing the autocomplete', () => {
+    const fixture = createComponent(DynamicallyChangingAutocomplete);
+    fixture.detectChanges();
+    const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+    dispatchFakeEvent(input, 'focusin');
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.textContent).toContain('First',
+      `Expected panel to display the option of the first autocomplete.`);
+    expect(overlayContainerElement.textContent).not.toContain('Second',
+      `Expected panel to not display the option of the second autocomplete.`);
+
+    // close overlay
+    dispatchFakeEvent(document, 'click');
+    fixture.detectChanges();
+
+    // Switch to second autocomplete
+    fixture.componentInstance.trigger.autocomplete = fixture.componentInstance.autoTow;
+    fixture.detectChanges();
+
+    // reopen agian
+    dispatchFakeEvent(input, 'focusin');
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.textContent).not.toContain('First',
+      `Expected panel to not display the option of the first autocomplete.`);
+    expect(overlayContainerElement.textContent).toContain('Second',
+      `Expected panel to display the option of the second autocomplete.`);
+
+  });
+
 });
 
 @Component({
@@ -2607,3 +2639,21 @@ class AutocompleteWithNativeAutocompleteAttribute {
 })
 class InputWithoutAutocompleteAndDisabled {
 }
+
+@Component({
+  template: `
+    <input type="number" matInput [matAutocomplete]="autoOne">
+    <mat-autocomplete #autoOne>
+      <mat-option [value]="0">First</mat-option>
+    </mat-autocomplete>
+
+    <mat-autocomplete #autoTow>
+      <mat-option [value]="1">Second</mat-option>
+    </mat-autocomplete>
+  `,
+})
+class DynamicallyChangingAutocomplete {
+  @ViewChild('autoOne') autoOne: MatAutocomplete;
+  @ViewChild('autoTow') autoTow: MatAutocomplete;
+  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
+}

src/lib/autocomplete/autocomplete.ts

@@ -24,6 +24,8 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
+  AfterViewInit,
+  ViewContainerRef,
 } from '@angular/core';
 import {
   CanDisableRipple,
@@ -33,6 +35,7 @@ import {
   MatOption,
   mixinDisableRipple,
 } from '@angular/material/core';
+import {TemplatePortal} from '@angular/cdk/portal';
 
 
 /**
@@ -92,14 +95,17 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
   ]
 })
 export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterContentInit,
-  CanDisableRipple {
+  AfterViewInit, CanDisableRipple {
 
   /** Manages active item in option list based on key events. */
   _keyManager: ActiveDescendantKeyManager<MatOption>;
 
   /** Whether the autocomplete panel should be visible, depending on option length. */
   showPanel: boolean = false;
 
+  /** @docs-private */
+  _portal: TemplatePortal;
+
   /** Whether the autocomplete panel is open. */
   get isOpen(): boolean { return this._isOpen && this.showPanel; }
   _isOpen: boolean = false;
@@ -165,12 +171,17 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _elementRef: ElementRef<HTMLElement>,
+    private _viewContainerRef: ViewContainerRef,
     @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) defaults: MatAutocompleteDefaultOptions) {
     super();
 
     this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
   }
 
+  ngAfterViewInit() {
+    this._portal = new TemplatePortal(this.template, this._viewContainerRef);
+  }
+
   ngAfterContentInit() {
     this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options).withWrap();
     // Set the initial visibility state.