npm install @angular/aria

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

@Component({
  selector: 'app-listbox-example',
  imports: [Listbox, Option],
  template: `
    <ul ngListbox [(value)]="selectedItem">
      @for (item of items; track item.id) {
        <li ngOption [value]="item.id" [label]="item.name">
          {{item.name}}
        </li>
      }
    </ul>
    
    <p>Selected: {{selectedItem()}}</p>
  `
})
export class ListboxExample {
  selectedItem = signal('');
  
  items = [
    {id: '1', name: 'Option 1'},
    {id: '2', name: 'Option 2'},
    {id: '3', name: 'Option 3'}
  ];
}

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

@Component({
  selector: 'app-multi-select',
  imports: [Listbox, Option],
  template: `
    <ul ngListbox [(value)]="selectedItems" [multi]="true">
      @for (item of items; track item.id) {
        <li ngOption [value]="item.id" [label]="item.name">
          {{item.name}}
        </li>
      }
    </ul>
    
    <p>Selected: {{selectedItems().join(', ')}}</p>
  `
})
export class MultiSelectExample {
  selectedItems = signal<string[]>([]);
  
  items = [
    {id: 'apple', name: 'Apple'},
    {id: 'banana', name: 'Banana'},
    {id: 'cherry', name: 'Cherry'}
  ];
}

<ul ngListbox [(value)]="selected" orientation="horizontal">
  <li ngOption value="small">Small</li>
  <li ngOption value="medium">Medium</li>
  <li ngOption value="large">Large</li>
</ul>

<ul ngListbox [(value)]="selected">
  <li ngOption value="available">Available</li>
  <li ngOption value="sold-out" [disabled]="true">Sold Out</li>
  <li ngOption value="in-stock">In Stock</li>
</ul>

<div ngCombobox>
  <input ngComboboxInput />
  
  <ng-template ngComboboxPopupContainer>
    <div ngListbox [(value)]="selectedValue">
      @for (option of options; track option) {
        <div ngOption [value]="option">{{option}}</div>
      }
    </div>
  </ng-template>
</div>