Angular | Always display autocomplete options

Issue

How can I still show the Angular Material Autocomplete menu even if the input is not in focus? Are there any arguments to fill in? Or is it possible in TS or even in CSS?

Solution

Just set autofocus attribute on your input, this will trigger your menu on your component initialization

<input autofocus [matAutocomplete]="myAutoComplete">
<mat-autocomplete #auto="matAutocomplete">
  ...
</mat-autocomplete>

Or if you want to do it programmatically from your component class file, you can use @ViewChild to query the MatAutocompleteTrigger, and use its openPanel(), like this

@ViewChild(MatAutocompleteTrigger) 
autocomplete!: MatAutocompleteTrigger;

And in your function call

this.autocomplete.openPanel();

Answered By - fujy