title: How to make <mat-autocomplete> show when click on input
body: <p>I use a material autocomplete form linked to a input with Angular 8</p>
  
  <p>I'm new to Angular and I'm still learning.
  I've already tried some solution I found on stackoverflow without success ( e.g: <a href="https://stackoverflow.com/questions/52319615/material-autocomplete-not-displaying-list-on-click">Material autocomplete not displaying list on click</a>)</p>
  
  <p>Here's my HTML page:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;mat-form-field&gt;
        &lt;input
          matInput
          type="text"
          placeholder="Equipment"
          aria-label="Number"
          [formControl]="machineControl"
          [formControl]="machineFilter"
          [matAutocomplete]="auto"
          #machineinput
        /&gt;
        &lt;mat-autocomplete #auto="matAutocomplete"&gt;
          &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;
            {{ option }}
          &lt;/mat-option&gt;
        &lt;/mat-autocomplete&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>And here's my Typescript page:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class DocumentsListComponent implements OnInit {
    machineControl = new FormControl();
    options: string[] = [];
    filteredOptions: Observable&lt;string[]&gt;;
  
    @ViewChild('machineControl', { static: true }) input: ElementRef;
  
   constructor(public restApi: DocumentsService) {}
  
    ngOnInit() {
  
  
      this.restApi.getList().then(res =&gt; {
        [...]
        for (const docs of this.Document) {
          if (this.options.some(machine =&gt; machine === docs.machine)) {
          } else {
            this.options.push(docs.machine);
          }
        }
      });
  
      this.filteredOptions = this.machineControl.valueChanges.pipe(
        startWith(''),
        map(value =&gt; this._filter(value))
      );
  
      private _filter(value: string): string[] {
          const filterValue = value.toLowerCase();
  
          return this.options.filter(option =&gt; 
          option.toLowerCase().includes(filterValue));
      }
  </code></pre>
  
  <p>I expect the auto-complete form to show up on input click but I need to type at least 1 character for it to show (Removing this character still show the auto-complete form)</p>