title: Performance issue with @angular/material autocomplete
body: <p>I am using Angular/Material Autocomplete. While loading data to the Autocomplete getting serious performance issues,like the rendering takes around 30 seconds and it takes more than 10 seconds to become stable,data is loaded from the server, and the data received from the server is quite fast. To Over Come that issue i used cdkVirtualScroll, after scrolling down to end and clicking again the text box it's loading empty popup after scroll its loading values.</p>
  
  <p><strong>html</strong> </p>
  
  <pre><code>   &lt;mat-form-field&gt;
        &lt;input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto"&gt;
        &lt;mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()"&gt;
          &lt;cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144"&gt;
            &lt;mat-option *cdkVirtualFor="let option of options" [value]="option"&gt;
              {{option}}
            &lt;/mat-option&gt;
          &lt;/cdk-virtual-scroll-viewport&gt;
          &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code>export class AppComponent  {
    options: string[] = [];
  
    @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;
  
    constructor() {
      for (let i = 0; i &lt; 10000; i++) {
        this.options.push("#"+i);
      }
    }
  
    panelOpened() {
      if (this.viewport) {
        this.viewport.checkViewportSize();
      }
    }
  }
  </code></pre>
  
  <p>Check the ex: <a href="https://stackblitz.com/edit/angular-7vcohv?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-7vcohv?file=src%2Fapp%2Fapp.component.html</a></p>