title: Show autocomplete dropdown only after type at least 1 letter in Angular 2+
body: <p>I would like to implement an autocomplete using Angular 2+ with <a href="https://material.angular.io/components/autocomplete/overview" rel="noreferrer">angular material design</a> where the options should not appear unless they've typed at least 1 letter.</p>
  
  <p>By default, the autocomplete is toggleable on focus even when the input is empty, so I want to change this behavior.</p>
  
  <p>I have tried to add a condition on mat-autocomplete element <code>*ngIf="inputField.value"</code> in order to display the options only if the input has value, but it returns the error:</p>
  
  <p>Error: Attempting to open an undefined instance of <code>mat-autocomplete</code>. Make sure that the id passed to the <code>matAutocomplete</code> is correct and that you're attempting to open it after the ngAfterContentInit hook.</p>
  
  <p>Also, I have tried to add a condition into <code>[matAutocomplete]="auto"</code> on the input field, but it also returns error.</p>
  
  <p>I noticed that when the autocomplete options are being displayed, the elements <code>cdk-overlay-container</code> and <code>mat-autocomplete-panel</code> are created before close <code>&lt;/body&gt;</code>, and they are unlinked with the original  component, so it difficult to hide by css.</p>
  
  <p>Do you have ideas how to do that?</p>
  
  <p>Please follow the code on <a href="https://stackblitz.com/edit/angular-qxd4hq?file=app/autocomplete-filter-example.html" rel="noreferrer">Stackblitz</a>.</p>
  
  <p>Thanks!</p>