Info

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

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

onToggleButtonClick

onToggleButtonClick(treeRunTimeItem: TreeItemRunTimeModel, event: Event)

Parameters :

Name	Type	Optional
treeRunTimeItem	`TreeItemRunTimeModel`	No
event	`Event`	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

getcssClasses()

File

Description

Basic Usage

With Custom Template

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""