API for listbox

API reference for Angular CDK listbox

import {CdkListboxModule} from '@angular/cdk/listbox';

A selectable option in a listbox.

Selector: [cdkOption]

Exported as: cdkOption
Properties
Name Description
@Input({ alias: 'cdkOptionDisabled', transform: booleanAttribute })

disabled: boolean

Whether this option is disabled.

@Input('tabindex')

enabledTabIndex:

The tabindex of the option when it is enabled.

@Input()

id:

The id of the option's host element.

@Input('cdkOptionTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during listbox typeahead. If not specified, the textContent of the item will be used.

@Input('cdkOption')

value: T

The value of this option.

destroyed: Subject<void>

Emits when the option is destroyed.

element: HTMLElement

The option's host element

listbox: CdkListbox<T>

The parent listbox this option belongs to.

Methods
deselect

Deselect this option if it is selected.

focus

Focus this option.

getLabel

Get the label for this element which is required by the FocusableOption interface.

isActive

Whether this option is active.

isSelected

Whether this option is selected.

select

Select this option if it is not selected.

toggle

Toggle the selected state of this option.

Selector: [cdkListbox]

Exported as: cdkListbox
Properties
Name Description
@Input('cdkListboxCompareWith')

compareWith: undefined | ((o1: T, o2: T) => boolean)

The function used to compare option values.

@Input({ alias: 'cdkListboxDisabled', transform: booleanAttribute })

disabled: boolean

Whether the listbox is disabled.

@Input('tabindex')

enabledTabIndex:

The tabindex to use when the listbox is enabled.

@Input()

id:

The id of the option's host element.

@Input({ alias: 'cdkListboxMultiple', transform: booleanAttribute })

multiple: boolean

Whether the listbox allows multiple options to be selected. If the value switches from true to false, and more than one option is selected, all options are deselected.

@Input({ alias: 'cdkListboxNavigatesDisabledOptions', transform: booleanAttribute })

navigateDisabledOptions: boolean

Whether keyboard navigation should skip over disabled items.

@Input({ alias: 'cdkListboxNavigationWrapDisabled', transform: booleanAttribute })

navigationWrapDisabled: boolean

Whether the keyboard navigation should wrap when the user presses arrow down on the last item or arrow up on the first item.

@Input('cdkListboxOrientation')

orientation: "horizontal" | "vertical"

The orientation of the listbox. Only affects keyboard interaction, not visual layout.

@Input({ alias: 'cdkListboxUseActiveDescendant', transform: booleanAttribute })

useActiveDescendant: boolean

Whether the listbox will use active descendant or will move focus onto the options.

@Input('cdkListboxValue')

value: readonly T[]

The value selected in the listbox, represented as an array of option values.

@Output('cdkListboxValueChange')

valueChange: Subject<ListboxValueChangeEvent<T>>

Emits when the selected value(s) in the listbox change.

changeDetectorRef: inject(ChangeDetectorRef)

The change detector for this listbox.

destroyed: Subject<void>

Emits when the listbox is destroyed.

element: HTMLElement

The host element of the listbox.

listKeyManager: ActiveDescendantKeyManager<CdkOption<T>>

The key manager that manages keyboard navigation for this listbox.

ngZone: inject(NgZone)

The Angular zone.

options: QueryList<CdkOption<T>>

The child options in this listbox.

selectionModel: ListboxSelectionModel<T>

The selection model used by the listbox.

Methods
deselect

Deselect the given option.

Parameters

option

CdkOption<T>

The option to deselect

deselectValue

Deselect the given value.

Parameters

value

T

The value to deselect

focus

Focus the listbox's host element.

isActive

Get whether the given option is active.

Parameters

option

CdkOption<T>

The option to get the active state of

Returns
boolean

isSelected

Get whether the given option is selected.

Parameters

option

CdkOption<T>

The option to get the selected state of

isValueSelected

Get whether the given value is selected.

Parameters

value

T

The value to get the selected state of

select

Select the given option.

Parameters

option

CdkOption<T>

The option to select

selectValue

Select the given value.

Parameters

value

T

The value to select

setAllSelected

Set the selected state of all options.

Parameters

isSelected

boolean

The new selected state to set

toggle

Toggle the selected state of the given option.

Parameters

option

CdkOption<T>

The option to toggle

toggleValue

Toggle the selected state of the given value.

Parameters

value

T

The value to toggle

triggerOption

Triggers the given option in response to user interaction.

  • In single selection mode: selects the option and deselects any other selected option.
  • In multi selection mode: toggles the selected state of the option.
Parameters

option

CdkOption<T>

The option to trigger

triggerRange

Trigger the given range of options in response to user interaction. Should only be called in multi-selection mode.

Parameters

trigger

CdkOption<T>

The option that was triggered

from

number

The start index of the options to toggle

to

number

The end index of the options to toggle

on

boolean

Whether to toggle the option range on

Change event that is fired whenever the value of the listbox changes.

Properties
Name Description

listbox: CdkListbox<T>

Reference to the listbox that emitted the event.

option: CdkOption<T> | null

Reference to the option that was triggered.

value: readonly T[]

The new value of the listbox.

Azure & Blue theme selected.