### 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.

### Basic Usage

Example :

    <ul euiList>
      <li euiListItem>First item</li>
      <li euiListItem>Second item</li>
      <li euiListItem>Third item</li>
    </ul>

### With Nested Lists

Example :

    <ul euiList>
      <li euiListItem>
        Parent item
        <ul euiList>
          <li euiListItem>Child item</li>
        </ul>
      </li>
    </ul>

### Accessibility

- Uses semantic `list` role
- Keyboard navigation with Arrow keys
- Enter key activates items
- Focus management for nested lists

### Notes

- Can be used as attribute `[euiList]` or element `<eui-list>`
- Supports nested list structures
- Automatically manages tabindex for keyboard navigation

### 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 ""