• Overview
@angular/aria/tree

A container that transforms nested lists into an accessible, ARIA-compliant tree structure. It manages the overall state of the tree, including selection, expansion, and keyboard navigation.

API

    
      class Tree<V> {}

element

HTMLElement

A reference to the host element.

id

InputSignal<any>

A unique identifier for the tree.

orientation

InputSignal<"vertical" | "horizontal">

Orientation of the tree.

multi

InputSignalWithTransform<boolean, unknown>

Whether multi-selection is allowed.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the tree is disabled.

selectionMode

InputSignal<"explicit" | "follow">

The selection strategy used by the tree.

  • explicit: Items are selected explicitly by the user (e.g., via click or spacebar).
  • follow: The focused item is automatically selected.

focusMode

InputSignal<"roving" | "activedescendant">

The focus strategy used by the tree.

  • roving: Focus is moved to the active item using tabindex.
  • activedescendant: Focus remains on the tree container, and aria-activedescendant is used to indicate the active item.

wrap

InputSignalWithTransform<boolean, unknown>

Whether navigation wraps.

softDisabled

InputSignalWithTransform<boolean, unknown>

Whether to allow disabled items to receive focus. When true, disabled items are focusable but not interactive. When false, disabled items are skipped during navigation.

typeaheadDelay

InputSignal<number>

The delay in seconds before the typeahead search is reset.

values

ModelSignal<V[]>

The values of the currently selected items.

textDirection

WritableSignal<Direction>

Text direction.

currentType

InputSignal<"page" | "step" | "location" | "date" | "time" | "true" | "false">

The aria-current type. It can be used in navigation trees to indicate the currently active item. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current for more details.

scrollActiveItemIntoView

void
@paramoptionsScrollIntoViewOptions
@returnsvoid

Description

A container that transforms nested lists into an accessible, ARIA-compliant tree structure. It manages the overall state of the tree, including selection, expansion, and keyboard navigation.

<ul ngTree [(value)]="selectedItems" [multi]="true">
  <ng-template
    [ngTemplateOutlet]="treeNodes"
    [ngTemplateOutletContext]="{nodes: treeData, parent: tree}"
  />
</ul>

<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
  @for (node of nodes; track node.name) {
    <li ngTreeItem [parent]="parent" [value]="node.name" [label]="node.name">
      {{ node.name }}
      @if (node.children) {
        <ul role="group">
          <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
            <ng-template
              [ngTemplateOutlet]="treeNodes"
              [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
            />
          </ng-template>
        </ul>
      }
    </li>
  }
</ng-template>
Jump to details