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.

The NgStarter Angular Tree component lets you display hierarchical data with expandable parent and child nodes. Use ngs-tree when users need to inspect or navigate hierarchical data where parent and child levels matter: folders and files, categories, permissions, taxonomies, organization structures, nested settings, product/entity hierarchies, and other expandable trees. It includes examples for Basic tree, Selectable tree, Checkable tree, Draggable tree, Searchable tree, and Tree with dynamic data.

Basic tree

Use a basic tree when all child nodes are already available and can be read with a children accessor.

Fruit

Vegetables

Selectable tree

Use a selectable tree when users need to highlight the current item while browsing a hierarchy.

Design system

Product

Selected: None

Checkable tree

Use a checkable tree when parent and child nodes should be selected together with partial selection shown on parent nodes.

Workspace

Team

Checked: None

Draggable tree

Use a draggable tree when users need to reorder a node or move it, including its nested children, into another node.

Workspace

Product

Searchable tree

Use a searchable tree when users need to filter an existing hierarchy while keeping matching child nodes connected to their parent path.

Fruit

Vegetables

Tree with dynamic data

Use a dynamic tree when expanding a node should load or insert its children on demand.

Fruits

Vegetables

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Tree

Basic tree

Selectable tree

Checkable tree

Draggable tree

Searchable tree

Tree with dynamic data

Source code, templates, and commercial support

Build the surrounding workflow