### File

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

### Description

Individual item component within eui-tree-list representing a single node in the hierarchical structure. Supports nested sub-items, expand/collapse functionality, and custom content projection. Implements keyboard navigation and ARIA treeitem role for accessibility. Integrates with BaseStatesDirective for theming variants (primary, secondary, success, warning, danger). Must be used as a direct child of eui-tree-list or nested within other tree list items.

### Basic Usage

Example :

    <!-- Simple tree item -->
    <eui-tree-list-item label="Documents" />

    <!-- Tree item with nested items -->
    <eui-tree-list-item label="Projects" [isExpanded]="true">
      <eui-tree-list>
        <eui-tree-list-item label="Project A" />
        <eui-tree-list-item label="Project B" />
      </eui-tree-list>
    </eui-tree-list-item>

    <!-- With sublabel and active state -->
    <eui-tree-list-item
      label="Current File"
      subLabel="Modified today"
      [isActive]="true"
      euiPrimary />

### Custom Content

Example :

    <eui-tree-list-item>
      <eui-tree-list-item-content>
        <eui-icon-svg icon="eui-folder" />
        <span>Custom Content</span>
      </eui-tree-list-item-content>
    </eui-tree-list-item>

    <!-- Custom label -->
    <eui-tree-list-item>
      <eui-tree-list-item-label>
        <strong>Bold Label</strong>
      </eui-tree-list-item-label>
    </eui-tree-list-item>

### Accessibility

- Implements ARIA treeitem role automatically
- Keyboard navigation: Arrow keys (up/down/left/right), Enter/Space to toggle
- Expanded state announced to screen readers
- Focus management with proper tabindex handling
- Aria-label generated from label or custom content

### Notes

- Nested items must be wrapped in eui-tree-list component
- Supports color variants via BaseStatesDirective (euiPrimary, euiSuccess, etc.)
- isActive highlights the current/selected item
- isAlwaysExpanded keeps item permanently expanded without toggle button
- Custom content projections: eui-tree-list-item-label, eui-tree-list-item-details, eui-tree-list-item-sub-container

### Implements

`AfterContentInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiVariant
selector | `eui-tree-list-item`
imports | `TranslateModule` `FormsModule` `NgTemplateOutlet` `EUI_LABEL` `EUI_ICON_INPUT` `EUI_ICON_BUTTON_EXPANDER`
templateUrl | `./eui-tree-list-item.component.html`

### Index

###### Properties

- baseStatesDirective
- customContent
- customDetailContent
- customLabel
- customSubContainerContent
- focusable
- hasCustomContent
- hasSub
- isHovered
- subTreeList
- tabIndex
- treeListComponent

###### Methods

- Public focus
- Public focusOnLastExpandedTreeItem
- onKeyDown
- Public setExpandedState
- Public setVisibleState
- toggle

###### Inputs

- ariaLabel
- e2eAttr
- id
- isActive
- isAlwaysExpanded
- isDisplaySubLinksOnHover
- isExpanded
- isNavigateOnlyOnLabelClick
- isVisible
- label
- linkUrl
- subLabel
- subLinks
- url

###### Outputs

- toggled

###### HostBindings

- attr.role
- attr.tabindex
- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`

e2eAttr
Type : `string`
Default value : `'eui-tree-list-item'`

id
Type : `string`

isActive
Type : `boolean`
Default value : `false`
Option that enables a corresponding class if it is set to true.

isAlwaysExpanded
Type : `boolean`
Default value : `false`
Option to set the expanded state of the list item when it is always expanded.

isDisplaySubLinksOnHover
Type : `boolean`
Default value : `false`

isExpanded
Type : `boolean`
Default value : `false`
Option to set the expanded state of the list item.

isNavigateOnlyOnLabelClick
Type : `boolean`
Default value : `false`

isVisible
Type : `boolean`
Default value : `true`
Option to set the visible state of the list item and apply the corresponding hidden class if it is set to false.

label
Type : `string`
The label of the tree list item if there is no customLabel.

linkUrl
Type : `string`

subLabel
Type : `string`
The sublabel of the tree list item if there is no customLabel.

subLinks
Type : `UxLinkLegacy[]`
Default value : `[]`

url
Type : `string`

### Outputs

toggled
Type : `EventEmitter`
Event emitted upon toggling the expanded state.

### HostBindings

attr.role
Type : `string`
Default value : `'treeitem'`

attr.tabindex
Type : `string`
Default value : `'0'`

class
Type : `string`

### Methods

Public focus
`focus()`
Method used to enable/disable the focus state. Returns : `void`

Public focusOnLastExpandedTreeItem
`focusOnLastExpandedTreeItem()`
Method used to focus on the last expanded tree item. Returns : `void`

onKeyDown
`onKeyDown(event: KeyboardEvent)`

Method fired when a key is pressed down.

Parameters :

Name | Type | Optional | Description

event

`KeyboardEvent`

No

- The keyboard event.

Returns : `void`

Public setExpandedState
`setExpandedState(state: boolean)`

Method that sets the expanded state.

Parameters :

Name | Type | Optional | Description

state

`boolean`

No

- The expanded state.

Returns : `void`

Public setVisibleState
`setVisibleState(state: boolean)`

Method that sets the visible state.

Parameters :

Name | Type | Optional | Description

state

`boolean`

No

- The visible state.

Returns : `void`

toggle
`toggle(event: Event)`

Method fired when the expander button is clicked.

Parameters :

Name | Type | Optional | Description

event

`Event`

No

- The click event.

Returns : `void`

### Properties

baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

customContent
Type : `QueryList<EuiTreeListItemContentComponent>`
Decorators : `@ContentChildren(undefined, {descendants: false})`

customDetailContent
Type : `QueryList<EuiTreeListItemDetailsContentTagDirective>`
Decorators : `@ContentChild(undefined)`

customLabel
Type : `QueryList<EuiTreeListItemLabelTagDirective>`
Decorators : `@ContentChild(undefined)`

customSubContainerContent
Type : `QueryList<EuiTreeListItemSubContainerContentTagDirective>`
Decorators : `@ContentChild(undefined)`

focusable
Type : `ElementRef<HTMLDivElement>`
Decorators : `@ViewChild('focusable')`

hasCustomContent
Type : `unknown`
Default value : `false`

hasSub
Type : `unknown`
Default value : `false`

isHovered
Type : `unknown`
Default value : `false`

subTreeList
Type : `QueryList<EuiTreeListComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

tabIndex
Type : `string`
Default value : `'0'`
Decorators : `@HostBinding('attr.tabindex')`

treeListComponent
Type : `EuiTreeListComponent`
Default value : `inject(EuiTreeListComponent, { host: true, optional: true })!`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""