### File

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

### Implements

`AfterContentInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiAccent 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
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
Default value : `false`

hasSub
Default value : `false`

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