I decided to enhance the autocomplete feature on my project by taking an example from the Material official website. Instead of having the options stored in a variable within the component class, I created a function to retrieve the options. Although the options display correctly, I encountered an issue where I am unable to select any value. Clicking on the drop-down menu does not result in selecting a value.
Check out a sample project showcasing this issue on StackBlitz.
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options()" [value]="option">
{{option.value}}
</mat-option>
</mat-autocomplete>
export class AutocompleteSimpleExample {
myControl = new FormControl();
options(): KeyValue[] {
return [{ key: "1", value: "One" }];
}
}
interface KeyValue {
key: string;
value: string;
}