Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Tree

Tree displays hierarchical data with expandable parent and child nodes. Use it for folders, categories, permissions, taxonomies, organization structures, nested settings, and entity trees where the level of each item matters. Use List for a simple vertical collection, Navigation or Sidebar for primary app navigation, ExpansionPanel for FAQ-like sections, and Table or DataView when rows need columns, sorting, filtering, or dense data operations.

Key Features:
  • Hierarchical representation for parent and child nodes.
  • Dynamic loading for large or remote trees.
  • Custom node templates with different layouts for leaf and expandable nodes.
  • Keyboard navigation and ARIA attributes through the Angular CDK tree primitives.

Tree Properties

PropTypeDefault
dataSource
The data source that contains the data to be rendered.
DataSource<T> | Observable<T[]> | T[]
treeControl
The tree control that handles the tree's expansion state.
TreeControl<T, K>
trackBy
Tracking function that will be used to check the differences in data changes.
TrackByFunction<T>

Tree Node Properties

PropTypeDefault
disabled
Whether the tree node is disabled.
booleanfalse
tabIndex
Tabindex of the tree node.
number0

Tree Node Events

EventDescription
activationEvent emitted when the node is activated.
expandedChangeEvent emitted when the node expansion state changes.