API reference for Angular CDK listbox
import {CdkListboxModule} from '@angular/cdk/listbox';
Directives
CdkOption
A selectable option in a listbox.
Selector: [cdkOption]
Exported as: cdkOptionProperties
Name | Description |
---|---|
@Input({ alias: 'cdkOptionDisabled', transform: booleanAttribute })
|
Whether this option is disabled. |
@Input('tabindex')
|
The tabindex of the option when it is enabled. |
@Input()
|
The id of the option's host element. |
@Input('cdkOptionTypeaheadLabel')
|
The text used to locate this item during listbox typeahead. If not specified,
the |
@Input('cdkOption')
|
The value of this option. |
|
Emits when the option is destroyed. |
|
The option's host element |
|
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. |
CdkListbox
Selector: [cdkListbox]
Exported as: cdkListboxProperties
Name | Description |
---|---|
@Input('cdkListboxCompareWith')
|
The function used to compare option values. |
@Input({ alias: 'cdkListboxDisabled', transform: booleanAttribute })
|
Whether the listbox is disabled. |
@Input('tabindex')
|
The tabindex to use when the listbox is enabled. |
@Input()
|
The id of the option's host element. |
@Input({ alias: 'cdkListboxMultiple', transform: booleanAttribute })
|
Whether the listbox allows multiple options to be selected. If the value switches from |
@Input({ alias: 'cdkListboxNavigatesDisabledOptions', transform: booleanAttribute })
|
Whether keyboard navigation should skip over disabled items. |
@Input({ alias: 'cdkListboxNavigationWrapDisabled', transform: booleanAttribute })
|
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')
|
The orientation of the listbox. Only affects keyboard interaction, not visual layout. |
@Input({ alias: 'cdkListboxUseActiveDescendant', transform: booleanAttribute })
|
Whether the listbox will use active descendant or will move focus onto the options. |
@Input('cdkListboxValue')
|
The value selected in the listbox, represented as an array of option values. |
@Output('cdkListboxValueChange')
|
Emits when the selected value(s) in the listbox change. |
|
The change detector for this listbox. |
|
Emits when the listbox is destroyed. |
|
The host element of the listbox. |
|
The key manager that manages keyboard navigation for this listbox. |
|
The Angular zone. |
|
The child options in this listbox. |
|
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.
|
|
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 |
Interfaces
ListboxValueChangeEvent
Change event that is fired whenever the value of the listbox changes.
Properties
Name | Description |
---|---|
|
Reference to the listbox that emitted the event. |
|
Reference to the option that was triggered. |
|
The new value of the listbox. |