### File

`packages/components/eui-list/eui-list.component.ts`

### Description

Component that provides a navigable list implementation with keyboard interaction support. Works with Angular CDK's FocusKeyManager to enable keyboard navigation between list items.

The component automatically manages focus between nested lists and supports rich content navigation. It can contain multiple EuiListItemComponents as children.

### Implements

`AfterContentInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `[euiList], eui-list`
template |
    <ng-content/>
styleUrl | `./eui-list.scss`

### Index

###### Properties
items role tabIndex
###### Methods
checkRichContentFocusState onKeydown
###### HostBindings
attr.role attr.tabindex class
###### HostListeners
keydown
###### Accessors
cssClasses

### HostBindings

attr.role
Type : `string`
Default value : `'list'`
Binds the 'list' ARIA role to the host element for accessibility. This informs screen readers that this component functions as a list.

attr.tabindex
Type : `string`
Binds the tabIndex attribute to the host element. Controls whether the list can receive keyboard focus. Set to '0' for top-level lists and '-1' for nested lists.

class
Type : `string`
CSS class binding that applies the 'eui-list' class to the host element. This class applies the basic styling for the list component.

### HostListeners

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Handles keyboard events for navigating the list. Supports Enter key for selection and arrow keys for navigation. Parameters :
Name | Optional | Description
event | No | The keyboard event to handle

### Methods

checkRichContentFocusState
`checkRichContentFocusState()`
Manages focus state of rich content navigation within list items. Handles the focus transition between list item elements and their navigable content. Called when right/left arrow keys are pressed on items with navigable content. Returns : `void`

onKeydown
`onKeydown(event: KeyboardEvent)`
Decorators : `@HostListener('keydown', ['$event'])`
Handles keyboard events for navigating the list. Supports Enter key for selection and arrow keys for navigation. Parameters :
Name | Type | Optional | Description
event | `KeyboardEvent` | No | The keyboard event to handle
Returns : `void`

### Properties

items
Type : `QueryList<EuiListItemComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`
Collection of all list item components that are children of this list. Includes items from nested lists due to the 'descendants: true' option.

role
Type : `string`
Default value : `'list'`
Decorators : `@HostBinding('attr.role')`
Binds the 'list' ARIA role to the host element for accessibility. This informs screen readers that this component functions as a list.

tabIndex
Type : `string`
Decorators : `@HostBinding('attr.tabindex')`
Binds the tabIndex attribute to the host element. Controls whether the list can receive keyboard focus. Set to '0' for top-level lists and '-1' for nested lists.

### Accessors

cssClasses
get `cssClasses()`
CSS class binding that applies the 'eui-list' class to the host element. This class applies the basic styling for the list component. Returns : `string`

# results matching ""

# No results matching ""