The Tree component allows users to browse hierarchical data structures like file systems, categories, or organizational charts. It supports unlimited nesting, expand/collapse actions, and custom icons.
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Simple tree showing a file system structure.
Click a node to see details
<ply-tree
[nodes]="nodes"
(nodeClick)="onNodeClick($event)">
</ply-tree>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add tree
// Paths are relative to aliases.components (default: src/app/components)
import { TreeComponent, TreeNode } from './tree/tree.component';
@Component({
selector: 'app-tree-example',
imports: [
TreeComponent
],
template: `...`
})
export class TreeExampleComponent {}Install
npx ply-ui-cli add tree
Run the following command to add this component to your project:
npx ply-ui-cli add tree
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add tree
// Paths are relative to aliases.components (default: src/app/components)
import { TreeComponent, TreeNode } from './tree/tree.component';
@Component({
selector: 'app-your-component',
imports: [
TreeComponent
],
template: `...`
})
export class YourComponent {} API for tree — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
TreeNode | label | string | — | The primary display text for this node. |
TreeNode | icon | string | — | Optional icon name to display next to the label. |
TreeNode | children | TreeNode[] | — | Nested child nodes. If present, this node becomes a collapsible folder. |
TreeNode | expanded | boolean | — | Whether the folder is currently expanded to show its children. |
TreeNode | selected | boolean | — | Whether this node is currently selected. |
TreeNode | data | Record<string, unknown> | — | Arbitrary payload data attached to this node. |
ply-tree | nodes | TreeNode[] | [] | The hierarchical array of nodes to render. |
ply-tree | (nodeClick) | TreeNode | — | Emitted when a user clicks on a node's label/body. |
ply-tree | (nodeExpand) | TreeNode | — | Emitted when a folder node is expanded. |
ply-tree | (nodeCollapse) | TreeNode | — | Emitted when a folder node is collapsed. |
Content