Angular Tree Component, Hierarchical Data

What is Tree?

ngb-tree consumes an array of NgbTreeNode objects and renders nested lists with keyboard focus, ARIA roles, and optional checkboxes.

Data binding & selection

Bind nodes and let the component handle expand/collapse + selection state.

Selected: None

Product
Engineering
People

<ngb-tree
            [nodes]="nodes"
            [showCheckbox]="true"
            (selectionChange)="onSelection($event)"
            (expand)="log('expand ' + $event.label)">
          </ngb-tree>

JSON view

Use type="json" to show key/value nodes for configuration trees.

config.json

<ngb-tree [nodes]="settings" type="json"></ngb-tree>

Localization

Set dir="rtl" for right-to-left layout and provide translated labels through [i18n].

التجارب

اللوحات

<ngb-tree [nodes]="nodes" [i18n]="{ collapse: 'طي' }" dir="rtl">

Accessibility & keyboard

Tree exposes role="tree", role="treeitem", arrow-key navigation, and Enter/Space to toggle selection. Label the tree and test custom content with keyboard navigation.

<ngb-tree aria-label="Workspace tree" [nodes]="nodes"></ngb-tree>

Recent events

Interact with the tree to see events.