title: Avoid Angular Material Autocomplete display mat-options when its empty
body: <p>I´m starting to use Material in one of my projects.
  Seeing the example of the <code>&lt;mat-autocomplete&gt;</code> of the documentation website...</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field class="example-full-width"&gt;
    &lt;input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl"&gt;
      &lt;mat-autocomplete #auto="matAutocomplete"&gt;
      &lt;mat-option *ngFor="let state of filteredStates | async" [value]="state.name"&gt;
      &lt;span&gt;{{state.name}}&lt;/span&gt; |
    &lt;/mat-option&gt;
  &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p></p>
  
  <p>ts:</p>
  
  <pre class="lang-ts prettyprint-override"><code>    export class AutocompleteOverviewExample {        
        stateCtrl = new FormControl();
        filteredStates: Observable&lt;State[]&gt;; 
        states: State[] = [
              { name: 'Arkansas'  },
              ...
              { name: 'Texas' }
            ];
  
            constructor() {
              this.filteredStates = this.stateCtrl.valueChanges
                .pipe(
                  startWith(''),
                  map(state =&gt; state ? this._filterStates(state) : this.states.slice())
                );
            }
  
            private _filterStates(value: string): State[] {
              const filterValue = value.toLowerCase();
              return this.states.filter(state =&gt; state.name.toLowerCase().indexOf(filterValue) === 0);
  
              // Material example, its basically a ._http.get(value).map
            }
          }
  </code></pre>
  
  <p>The <code>&lt;mat-option&gt;</code> list its deployed when you click in the input field. I would like to avoid that and only show the options when X (they have write 3 or more characters, its a 'small' list with 5 or 10 elements, etc).</p>
  
  <p>How can I modify this behavior and do it dynamically?</p>