NGSTARTER UI

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, 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

Tree with dynamic data

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

Fruits

Vegetables