Angular | Always display autocomplete options-CodePudding

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?

CodePudding user response：

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();