### File

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

### Description

The eui-tree can be used to display hierarchy data with optional added behavior inside node templates and interactions that could affect the rendered data such as expand, collapse, direct actions, extra menu actions, etc. Hierarchical tree component for displaying and interacting with nested data structures. Supports single and multi-select modes, recursive selection, virtual scrolling for large datasets, and custom node templates. Provides expand/collapse functionality, path highlighting, and customizable node rendering. Integrates with Angular CDK Tree for efficient rendering and state management. Commonly used for file explorers, organizational charts, category navigation, and any hierarchical data visualization.

### Basic Usage

Example :

    <eui-tree
      [nodes]="treeData"
      [isSelectable]="true"
      (selectionChange)="onSelectionChange($event)">
    </eui-tree>

Example :

    treeData: TreeDataModel = [
      {
        id: '1',
        label: 'Root',
        children: [
          { id: '1.1', label: 'Child 1' },
          { id: '1.2', label: 'Child 2' }
        ]
      }
    ];

### With Custom Template

Example :

    <eui-tree [nodes]="data" [nodeTemplateRef]="customNode">
    </eui-tree>

    <ng-template #customNode let-node>
      <eui-icon [svgName]="node.icon" />
      <span>{{ node.label }}</span>
    </ng-template>

### Accessibility

- Use role="tree" on container (automatically applied)
- Each node has role="treeitem"
- Keyboard navigation: Arrow keys to navigate, Enter to select, Space to expand/collapse
- Provide aria-label describing the tree purpose

### Notes

- Virtual scrolling improves performance for large trees (1000+ nodes)
- Recursive selection propagates selection to all children
- Custom templates allow full control over node rendering
- Supports lazy loading of child nodes

### Implements

`OnInit` `OnChanges` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-tree`
imports | `NgTemplateOutlet` `FormsModule` `TranslateModule` `ScrollingModule` `CdkTreeModule` `RouterModule` `EUI_INPUT_CHECKBOX` `EUI_BUTTON` `EUI_ICON` `EUI_LABEL` `EUI_BADGE` `EUI_CHIP` `EUI_DROPDOWN`
templateUrl | `./eui-tree.component.html`
styleUrl | `./eui-tree.scss`

### Index

###### Properties
cdkArrayDataSource cdkScrollableRef cdkTreeControl hasChild renderTree Public treeComponentInstance Public uid
###### Methods
collapseAll collapseAt expandAll expandAt filterTerm getProcessedNodes getRunTimeSelectionRecursiveState getSelection getTreeItem nodeSelected onNodeClick onNodeToggle onSelectFn setAllSelection trackBy trackByControl updateTreeItem
###### Inputs
autoTranslate collapsedSvgIconClass customNodeSelectFn e2eAttr expandedSvgIconClass highlightPath isClickTogglingNode isMultiselect isRecursiveParentSelection isRecursiveSelection isSingleSelect nodeContentMetadataTemplateRef nodes nodeTemplateRef rightContextMenuTemplateRef showLines showUnderlinedLinks virtualScrollPageSize virtualScrollThreshold
###### Outputs
nodeClick nodeToggle selectionChange
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

autoTranslate
Type : `boolean`
Default value : `true`
Whether i18n key can be passed to be translated with `TranslateService`.

collapsedSvgIconClass
Type : `string`
Default value : `'eui-chevron-down'`
Icon to display when a node is opened

customNodeSelectFn
Type : `CustomNodeSelectFn`

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

expandedSvgIconClass
Type : `string`
Default value : `'eui-chevron-right'`
Icon to display when a node is closed

highlightPath
Type : `boolean`
Default value : `false`
Whether all parents till the selected are highlighted in bold.

isClickTogglingNode
Type : `boolean`
Default value : `false`
Whether the full node display can be clicked to toggle the node.

isMultiselect
Type : `boolean`
Default value : `false`
Whether multiple nodes can be selected.

isRecursiveParentSelection
Type : `boolean`
Default value : `true`
In combination with `isMultiselect`. Whether the selection of all children will automatically select the parent.

isRecursiveSelection
Type : `boolean`
Default value : `false`
In combination with `isMultiselect`. Whether the selection of a node will automatically select its children.

isSingleSelect
Type : `boolean`
Default value : `false`
Whether only one node can be selected. Select one will unselect the previous selected.

nodeContentMetadataTemplateRef
Type : `TemplateRef<any>`

nodes
Type : `TreeDataModel`
Hierarchy of data to display in the tree

nodeTemplateRef
Type : `TemplateRef<any>`
Reference to the `ng-template` used to render node item

rightContextMenuTemplateRef
Type : `TemplateRef<any>`

showLines
Type : `boolean`
Default value : `true`
Whether the lines are displayed on the left of nodes.

showUnderlinedLinks
Type : `boolean`
Default value : `false`
Whether the links are underlined on hiver in the tree.

virtualScrollPageSize
Type : `number`
Default value : `400`
Size of the virtaul scroll pages

virtualScrollThreshold
Type : `number`
Default value : `800`
Treshold for the virtual scroll to be activated

### Outputs

nodeClick
Type : `EventEmitter`

nodeToggle
Type : `EventEmitter`

selectionChange
Type : `EventEmitter`

### HostBindings

class
Type : `string`

### Methods

collapseAll
`collapseAll()`
Returns : `void`

collapseAt
`collapseAt(path: string, detectChanges: unknown)`
Parameters :
Name | Type | Optional | Default value
path | `string` | No |
detectChanges | `unknown` | No | `true`
Returns : `void`

expandAll
`expandAll()`
Returns : `void`

expandAt
`expandAt(path: string, detectChanges: unknown)`
Parameters :
Name | Type | Optional | Default value
path | `string` | No |
detectChanges | `unknown` | No | `true`
Returns : `void`

filterTerm
`filterTerm(filterInput: string, filterKey?: string, showChildrenOfMatchedItems?: boolean)`
Parameters :
Name | Type | Optional
filterInput | `string` | No
filterKey | `string` | Yes
showChildrenOfMatchedItems | `boolean` | Yes
Returns : `void`

getProcessedNodes
`getProcessedNodes()`
Returns : `TreeDataModel`

getRunTimeSelectionRecursiveState
`getRunTimeSelectionRecursiveState(path: string)`
Parameters :
Name | Type | Optional
path | `string` | No
Returns : `TreeItemSelectionRecursiveModel`

getSelection
`getSelection()`
Returns : `TreeDataModel`

getTreeItem
`getTreeItem(path: string)`
Parameters :
Name | Type | Optional
path | `string` | No
Returns : `TreeItemModel`

nodeSelected
`nodeSelected(evt: any, path: string)`
Parameters :
Name | Type | Optional
evt | `any` | No
path | `string` | No
Returns : `void`

onNodeClick
`onNodeClick(treeRunTimeItem: TreeItemRunTimeModel, e: any)`
Parameters :
Name | Type | Optional
treeRunTimeItem | `TreeItemRunTimeModel` | No
e | `any` | No
Returns : `void`

onNodeToggle
`onNodeToggle(treeRunTimeItem: TreeItemRunTimeModel)`
Parameters :
Name | Type | Optional
treeRunTimeItem | `TreeItemRunTimeModel` | No
Returns : `void`

onSelectFn
`onSelectFn(path: string)`
Parameters :
Name | Type | Optional
path | `string` | No
Returns : `void`

setAllSelection
`setAllSelection(isChecked: boolean)`
Parameters :
Name | Type | Optional
isChecked | `boolean` | No
Returns : `void`

trackBy
`trackBy(index: number, item: TreeItemRunTimeModel)`
Parameters :
Name | Type | Optional
index | `number` | No
item | `TreeItemRunTimeModel` | No
Returns : `any`

trackByControl
`trackByControl(item: TreeItemRunTimeModel)`
Parameters :
Name | Type | Optional
item | `TreeItemRunTimeModel` | No
Returns : `any`

updateTreeItem
`updateTreeItem(givenTreeItem: TreeItemModel, path: string)`
Parameters :
Name | Type | Optional
givenTreeItem | `TreeItemModel` | No
path | `string` | No
Returns : `void`

### Properties

cdkArrayDataSource
Type : `ArrayDataSource<TreeItemRunTimeModel>`

cdkScrollableRef
Type : `CdkScrollable`
Decorators : `@ViewChild('cdkScrollableRef', {read: CdkScrollable})`

cdkTreeControl
Type : `NestedTreeControl<TreeItemRunTimeModel>`

hasChild
Type : `unknown`
Default value : `() => {...}`

renderTree
Type : `boolean`

Public treeComponentInstance
Type : `CdkTree<TreeItemRunTimeModel>`
Decorators : `@ViewChild('treeComponentInstance')`

Public uid
Type : `string`
Default value : `Math.floor(Math.random() * 1000000000).toString()`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""