npm install @angular/aria

import {Component, signal, computed} from '@angular/core';
import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria';
import {Listbox, Option} from '@angular/aria';

@Component({
  selector: 'app-combobox-example',
  imports: [Combobox, ComboboxInput, ComboboxPopupContainer, Listbox, Option],
  template: `
    <div ngCombobox filterMode="highlight">
      <input
        ngComboboxInput
        placeholder="Search for a state..."
        [(value)]="searchString"
      />

      <ng-template ngComboboxPopupContainer>
        <div ngListbox [(value)]="selectedValue">
          @for (option of filteredOptions(); track option) {
            <div ngOption [value]="option" [label]="option">
              <span>{{option}}</span>
            </div>
          }
        </div>
      </ng-template>
    </div>
  `
})
export class ComboboxExample {
  searchString = signal('');
  selectedValue = signal('');
  
  allOptions = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California'];
  
  filteredOptions = computed(() => {
    const search = this.searchString().toLowerCase();
    return this.allOptions.filter(opt => 
      opt.toLowerCase().includes(search)
    );
  });
}

<div ngCombobox filterMode="auto-select">
  <input ngComboboxInput placeholder="Type to search..." />
  
  <ng-template ngComboboxPopupContainer>
    <div ngListbox>
      <!-- First matching option is automatically selected -->
      @for (option of options; track option) {
        <div ngOption [value]="option">{{option}}</div>
      }
    </div>
  </ng-template>
</div>

<div ngCombobox [alwaysExpanded]="true">
  <input ngComboboxInput />
  
  <ng-template ngComboboxPopupContainer>
    <div ngListbox>
      <!-- Popup is always visible -->
    </div>
  </ng-template>
</div>

<div ngCombobox>
  <input ngComboboxInput />
  
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen">
    <div ngListbox>
      <!-- Options -->
    </div>
  </ng-template>
</div>