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-optioncan be collected into groups using the
mat-optgroup element: