Keyboard Navigation

The keyboard navigation of the AutoComplete is always available.

The AutoComplete supports the following keyboard shortcuts:

Esc Closes the popup.
Enter Selects the highlighted item.
Down Arrow Highlights the previous item.
Up Arrow Highlights the next item.
  selector: 'my-app',
  styles: ['.countries { width: 300px; }'],
  template: `
    <div class="example-wrapper">
        <p>Type the name of a European country:</p>
            [placeholder]="'e.g. Denmark'"
class AppComponent {
    public listItems: Array<string> = [
     "Bosnia & Herzegovina",
     "Czech Republic",
     "San Marino",
     "United Kingdom",
     "Vatican City"

In this article