title: Angular Material Autocomplete force selection
body: <p>In my angular 5 application I have some matAutocomplete, but I want to force the selection of oone of suggestions, so I am following this approach: 
  <a href="https://stackblitz.com/edit/autocomplete-force-selection-tests-w2fqww?file=app%2Fapp.component.html" rel="noreferrer">stackblitz</a>
  but for some reason in one case I have an issue: </p>
  
  <blockquote>
    <p>Cannot read property 'panelClosingActions' of undefined
        at CustomerDetailComponent.countryClosingActions (customer-detail.component.ts:199)
        at CustomerDetailComponent.ngAfterViewInit</p>
  </blockquote>
  
  <p>I have multiple matAutocomplete but only this one have problems.
  (info about this method is here <a href="https://github.com/angular/material2/issues/3334" rel="noreferrer">github</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput #nation placeholder="{{'customer.detail.labels.country'
        | translate }}" required [matAutocomplete]="tdAuto" name="country"  
        #count="ngModel" [(ngModel)]="selected.country"
        (ngModelChange)="searchCountry($event)"&gt;
          &lt;mat-autocomplete #tdAuto="matAutocomplete" [displayWith]="displayFn"&gt;
            &lt;mat-option (onSelectionChange)="setCountry(country)" *ngFor="let country of countries" [value]="country"&gt;
               &lt;div class="row"&gt;
                 &lt;img src="assets/img/flags24/{{country.alpha2Code | lowercase}}.png" /&gt;
                    &lt;span&gt;{{country.name}} ({{country.alpha2Code}})&lt;/span&gt;
               &lt;/div&gt;
           &lt;/mat-option&gt;
          &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><strong>component</strong></p>
  
  <pre><code>@ViewChild('nation', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
    subscription: Subscription;
  
  
  ngAfterViewInit() {
      this.countryClosingActions();
    }
  
    private countryClosingActions(): void {
      if (this.subscription &amp;&amp; !this.subscription.closed) {
        this.subscription.unsubscribe();
      }
  
      this.subscription = this.trigger.panelClosingActions
        .subscribe(e =&gt; {
          console.log('closing')
          if (!e || !e.source) {
            this.selected.country = null;
            this.selfCountry = null;
          }
        },
        err =&gt; this.countryClosingActions(),
        () =&gt; this.countryClosingActions());
    }
  </code></pre>