# Tree Node Use `ui-tree-node` when you need one expandable branch or want fine-grained control over recursive rows. For full collections of root nodes, use `ui-tree` instead. ## Import ```ts import { TreeNodeComponent, type TreeNode } from 'ui'; ``` ## Leaf and parent rows ```ts import { Component } from '@angular/core'; import { TreeNodeComponent, type TreeNode } from 'ui'; @Component({ selector: 'app-tree-node-basic-demo', standalone: true, imports: [TreeNodeComponent], template: `

Leaf row

Parent row

`, }) export class TreeNodeBasicDemoComponent { protected readonly leafNode: TreeNode = { id: 'leaf', label: 'Readme.md', icon: 'document', hasChildren: false, }; protected readonly parentNode: TreeNode = { id: 'parent', label: 'Project files', icon: 'folder', hasChildren: true, expanded: true, children: [ { id: 'brief', label: 'Brief.docx', icon: 'document', hasChildren: false }, { id: 'notes', label: 'Notes.md', icon: 'document', hasChildren: false }, ], }; } ``` ## Interaction behavior ```ts import { Component } from '@angular/core'; import { TreeNodeComponent, type TreeNode } from 'ui'; @Component({ selector: 'app-tree-node-behavior-demo', standalone: true, imports: [TreeNodeComponent], template: `

Browser style

Button-like interaction

`, }) export class TreeNodeBehaviorDemoComponent { protected readonly browserNode: TreeNode = { id: 'browser', label: 'src', icon: 'folder', selected: true, hasChildren: true, expanded: true, children: [ { id: 'app', label: 'app', icon: 'folder', hasChildren: false }, { id: 'styles', label: 'styles.scss', icon: 'document', hasChildren: false }, ], }; protected readonly actionNode: TreeNode = { id: 'action', label: 'Workspace', icon: 'folder', selected: true, hasChildren: true, expanded: true, children: [ { id: 'overview', label: 'Overview', icon: 'home', hasChildren: false }, { id: 'activity', label: 'Activity', icon: 'pulse', hasChildren: false }, ], }; } ``` ## Common states ```ts import { Component } from '@angular/core'; import { TreeNodeComponent, type TreeNode } from 'ui'; @Component({ selector: 'app-tree-node-states-demo', standalone: true, imports: [TreeNodeComponent], template: `

Default

Selected

Disabled

`, }) export class TreeNodeStatesDemoComponent { protected readonly defaultNode: TreeNode = { id: 'default', label: 'Design tokens.json', icon: 'document', hasChildren: false, }; protected readonly selectedNode: TreeNode = { id: 'selected', label: 'Brand assets', icon: 'folder', selected: true, hasChildren: true, expanded: true, children: [{ id: 'logo', label: 'Logo.svg', icon: 'image', hasChildren: false }], }; protected readonly disabledNode: TreeNode = { id: 'disabled', label: 'Archived release', icon: 'archive', disabled: true, hasChildren: false, }; } ``` ## Custom content templates ```ts import { CommonModule } from '@angular/common'; import { Component, TemplateRef, viewChild } from '@angular/core'; import { BadgeComponent, TreeNodeComponent, type TreeNode } from 'ui'; interface FileTreeNode extends TreeNode { data?: { meta: string; status?: string; }; } @Component({ selector: 'app-tree-node-content-template-demo', standalone: true, imports: [CommonModule, BadgeComponent, TreeNodeComponent], template: `
{{ node.label }} {{ node.data?.meta }}
@if (node.data?.status) { }
`, }) export class TreeNodeContentTemplateDemoComponent { protected readonly node: FileTreeNode = { id: 'content-template', label: 'Release notes', icon: 'document', hasChildren: true, expanded: true, data: { meta: 'Updated 2 hours ago', status: 'Synced', }, children: [ { id: 'content-template-child', label: 'Draft.md', icon: 'document', hasChildren: false, data: { meta: '3 collaborators', status: 'Draft', }, }, ], }; protected contentTemplateRef = viewChild>('content'); } ``` ## Quick actions ```ts import { CommonModule } from '@angular/common'; import { Component, TemplateRef, signal, viewChild } from '@angular/core'; import { ButtonComponent, TreeNodeComponent, type TreeNode } from 'ui'; @Component({ selector: 'app-tree-node-quick-actions-demo', standalone: true, imports: [CommonModule, ButtonComponent, TreeNodeComponent], template: `

Last action

{{ lastAction() || 'No quick action used yet.' }}
`, }) export class TreeNodeQuickActionsDemoComponent { protected readonly node: TreeNode = { id: 'quick-actions', label: 'Q2 planning', icon: 'folder', hasChildren: true, expanded: true, children: [ { id: 'timeline', label: 'Timeline.xlsx', icon: 'document', hasChildren: false }, { id: 'risks', label: 'Risks.md', icon: 'document', hasChildren: false }, ], }; protected readonly lastAction = signal(''); protected quickActionsTemplateRef = viewChild>('quickActions'); protected onQuickAction(action: string, node: TreeNode): void { this.lastAction.set(`${action} on "${node.label}"`); } } ``` ## Recursive nesting ```ts import { Component } from '@angular/core'; import { TreeNodeComponent, type TreeNode } from 'ui'; @Component({ selector: 'app-tree-node-recursive-demo', standalone: true, imports: [TreeNodeComponent], template: `

Recursive use

ui-tree-node can render nested children on its own.
Use it directly when you need a single expandable branch, not a full tree container.
For full collections of roots, prefer ui-tree.
`, }) export class TreeNodeRecursiveDemoComponent { protected readonly node: TreeNode = { id: 'root', label: 'Workspace', icon: 'folder', hasChildren: true, expanded: true, children: [ { id: 'project-a', label: 'Project A', icon: 'folder', hasChildren: true, expanded: true, children: [ { id: 'brief', label: 'Brief.docx', icon: 'document', hasChildren: false }, { id: 'board', label: 'Board.url', icon: 'link', hasChildren: false, selected: true }, ], }, { id: 'project-b', label: 'Project B', icon: 'folder', hasChildren: true, children: [{ id: 'notes', label: 'Notes.md', icon: 'document', hasChildren: false }], }, ], }; } ``` ## Drop targets inside a branch ```ts import { CommonModule } from '@angular/common'; import { Component, signal } from '@angular/core'; import { ButtonComponent, TreeNodeComponent, type TreeNode } from 'ui'; @Component({ selector: 'app-tree-node-drag-drop-demo', standalone: true, imports: [CommonModule, ButtonComponent, TreeNodeComponent], template: `
Reorder child items inside one branch to preview drop zones on ui-tree-node.
Reset branch
{{ lastAction() || 'No move yet.' }}
`, }) export class TreeNodeDragDropDemoComponent { protected readonly node = signal(this.createNode()); protected readonly lastAction = signal(''); protected onDrop(event: { node: TreeNode; position: 'before' | 'after' | 'inside' }): void { this.lastAction.set(`Drop target: "${event.node.label}" (${event.position}).`); } protected resetNode(): void { this.node.set(this.createNode()); this.lastAction.set('Branch reset to initial state.'); } private createNode(): TreeNode { return { id: 'drop-root', label: 'Assets', icon: 'folder', hasChildren: true, expanded: true, children: [ { id: 'cover', label: 'Cover.png', icon: 'image', hasChildren: false }, { id: 'icons', label: 'Icons.svg', icon: 'image', hasChildren: false }, { id: 'copy', label: 'Copy.txt', icon: 'document', hasChildren: false }, ], }; } } ``` ## Accessibility ### Tree-item semantics `ui-tree-node` exposes `role="treeitem"` and reflects hierarchical state through attributes such as `aria-expanded`, `aria-selected`, `aria-disabled`, and `aria-level` when applicable. ### Keyboard behavior Keyboard behavior follows the tree-item model. | Key | Action | | --- | --- | | Enter / Space | Activates the focused node. | | ArrowRight | Expands a collapsed parent node. | | ArrowLeft | Collapses an expanded parent node. | | * | Expands sibling branches at the same level when supported by the current context. | ### Custom content and quick actions If you replace the default row content with a custom template, preserve a clear primary label. Quick actions and extra controls need their own accessible labels and should not make the main tree-item purpose ambiguous.