Class CdkOption

src/cdk/listbox/listbox.ts:102–236

  },
})
export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightable, OnDestroy {
  /** The id of the option's host element. */
  @Input()
  get id() {
    return this._id || this._generatedId;
  }
  set id(value) {
    this._id = value;
  }
  private _id: string | undefined;
  private _generatedId = inject(_IdGenerator).getId('cdk-option-');

  /** The value of this option. */
  @Input('cdkOption') value!: T;

  /**
   * The text used to locate this item during listbox typeahead. If not specified,
   * the `textContent` of the item will be used.
   */
  @Input('cdkOptionTypeaheadLabel') typeaheadLabel: string | null = null;

  /** Whether this option is disabled. */
  @Input({alias: 'cdkOptionDisabled', transform: booleanAttribute})
  get disabled(): boolean {
    return this.listbox.disabled || this._disabled();
  }
  set disabled(value: boolean) {
    this._disabled.set(value);
  }
  private _disabled = signal(false);

  /** The tabindex of the option when it is enabled. */
  @Input({
    alias: 'tabindex',
    transform: (value: unknown) => (value == null ? undefined : numberAttribute(value)),
  })
  get enabledTabIndex() {
    return this._enabledTabIndex() === undefined
      ? this.listbox.enabledTabIndex
      : this._enabledTabIndex();
  }
  set enabledTabIndex(value) {
    this._enabledTabIndex.set(value);
  }
  private _enabledTabIndex = signal<number | null | undefined>(undefined);

  /** The option's host element */
  readonly element: HTMLElement = inject(ElementRef).nativeElement;

  /** The parent listbox this option belongs to. */
  protected readonly listbox: CdkListbox<T> = inject(CdkListbox);

  /** Emits when the option is destroyed. */
  protected destroyed = new Subject<void>();

  /** Emits when the option is clicked. */
  readonly _clicked = new Subject<MouseEvent>();