For more info please check the components's official demos & documentation
demos & documentation
The autocomplete is a normal text input enhanced by a panel of suggested options.
At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want our options to filter when we type, we need to add a custom filter.
If you want the option's control value (what is saved in the form) to be different than the option's display value (what is displayed in the text field), you'll need to set the
displayWith
property on your autocomplete element. A common use case for this might be if you want to save your data as an object, but display just one of the option's string properties. To make this work, create a function on your component class that maps the control value to the desired display value. Then bind it to the autocomplete's
displayWith
property.
If your use case requires for the first autocomplete option to be highlighted when the user opens the panel, you can do so by setting the
autoActiveFirstOption
input on the
mat-autocomplete
component. This behavior can be configured globally using the
MAT_AUTOCOMPLETE_DEFAULT_OPTIONS
injection token.
If your use case requires for the first autocomplete option to be highlighted when the user opens the panel, you can do so by setting the
autoActiveFirstOption
input on the
mat-autocomplete
component. This behavior can be configured globally using the
MAT_AUTOCOMPLETE_DEFAULT_OPTIONS
injection token.
mat-option
can be collected into groups using the mat-optgroup element: