Class Option

src/aria/listbox/option.ts:53–98

  },
})
export class Option<V> implements OnInit, OnDestroy {
  /** A reference to the host element. */
  readonly element = inject(ElementRef).nativeElement as HTMLElement;

  /** Whether the option is currently active (focused). */
  readonly active = computed(() => this._pattern.active());

  /** The parent Listbox. */
  private readonly _listbox = inject(LISTBOX);

  /** A unique identifier for the option. */
  readonly id = input(inject(_IdGenerator).getId('ng-option-', true));

  /** The parent Listbox UIPattern. */
  private readonly _listboxPattern = computed(() => this._listbox._pattern);

  /** The value of the option. */
  readonly value = input.required<V>();

  /** Whether an item is disabled. */
  readonly disabled = input(false, {transform: booleanAttribute});

  /** The text used by the typeahead search. */
  readonly label = input<string>();

  /** Whether the option is selected. */
  readonly selected = computed(() => this._pattern.selected());

  /** The Option UIPattern. */
  readonly _pattern = new OptionPattern<V>({
    ...this,
    id: this.id,
    value: this.value,
    listbox: this._listboxPattern,
    element: () => this.element,
    searchTerm: () => this.label() ?? '',
  });

  ngOnInit() {
    this._listbox._collection.register(this);
  }

  ngOnDestroy() {
    this._listbox._collection.unregister(this);
  }
}