Tree

New

Explore nested files, categories and other hierarchical data.

Keyboard navigationSingle selectionCustom templates

Project files

Expand folders with the chevron. Click a row to select it; click again to clear selection.

DocumentsFolder

WorkFolder

Notes.txt4 KB

ImagesFolder

ArchiveFolder

Select a file or expand a folder.

Selected key: none

Templates

Import AvTree and AvTreeNodeTemplate from avero-ui. Type your data as AvTreeNode<FileInfo>[]. The node template receives node, level, expanded and selected. Keep templates presentational; selection and navigation are handled by the tree.

HTML

<av-tree inputId="files" label="Project files" [value]="nodes"
  selectionMode="single" [(selection)]="selectedKey"
  [(expandedKeys)]="expandedKeys" [loading]="isLoading()"
  (onNodeSelect)="selected($event.node)"
  (onNodeExpand)="expanded($event.node)"
  (onNodeCollapse)="collapsed($event.node)">
  <ng-template [avTreeNode]="nodes" let-node let-expanded="expanded">
    <strong>{{ node.label }}</strong>
    <small>{{ node.data?.size }}</small>
  </ng-template>
</av-tree>

Usage and API

Each node needs a globally unique, stable key and a label. Optional fields: data, children, leaf, disabled and selectable. Required inputId must be unique on the page. Other inputs: value, label, selectionMode (none or single), disabled, loading and emptyMessage.

Controlled state. selection is a key or null; expandedKeys is an array of keys. Both support two-way binding. User events contain node and originalEvent. Programmatic updates do not emit interaction events, and input nodes are never mutated.

Loading children. Set leaf: false for a branch whose children have not loaded yet. Fetch its children in onNodeExpand, set loading during the request, and replace the value array with updated nodes. Expanded keys survive the response. Handle errors and retry in your application.

Keyboard. Tab enters the tree. Up/Down move between visible nodes; Right expands or enters a branch; Left collapses or returns to the parent. Home/End jump to the first/last node. Enter/Space select. Typing a letter finds the next matching label.

Scope and styling. This version supports single selection. Checkbox selection, multiple selection, filtering, drag and drop, and virtual scrolling are not included. Customize --av-tree-accent, --av-tree-background, --av-tree-border, --av-tree-radius, --av-tree-hover, --av-tree-selection-background and --av-tree-max-height.