• 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> {  readonly element: HTMLElement;  readonly id: InputSignal<any>;  readonly orientation: InputSignal<"vertical" | "horizontal">;  readonly multi: InputSignalWithTransform<boolean, unknown>;  readonly disabled: InputSignalWithTransform<boolean, unknown>;  readonly selectionMode: InputSignal<"explicit" | "follow">;  readonly focusMode: InputSignal<"roving" | "activedescendant">;  readonly wrap: InputSignalWithTransform<boolean, unknown>;  readonly softDisabled: InputSignalWithTransform<boolean, unknown>;  readonly typeaheadDelay: InputSignal<number>;  readonly values: ModelSignal<V[]>;  readonly textDirection: WritableSignal<Direction>;  readonly nav: InputSignalWithTransform<boolean, unknown>;  readonly currentType: InputSignal<"page" | "step" | "location" | "date" | "time" | "true" | "false">;  scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void;}

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