• Overview
@angular/aria/tree

A selectable and expandable item in an ngTree.

API

    
      class TreeItem<V> extends DeferredContentAware implements OnInit ,OnDestroy ,HasElement {  readonly element: HTMLElement;  readonly @Input() id: InputSignal<any>;  readonly @Input() value: InputSignal<V>;  readonly @Input() parent: InputSignal<Tree<V> | TreeItemGroup<V>>;  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;  readonly @Input() selectable: InputSignal<boolean>;  readonly @Input() @Output('expandedChange') expanded: ModelSignal<boolean>;  readonly @Input() label: InputSignal<string | undefined>;  readonly searchTerm: Signal<string>;  readonly tree: Signal<Tree<V>>;  readonly active: Signal<boolean>;  readonly level: Signal<number>;  readonly selected: Signal<boolean | undefined>;  readonly visible: Signal<boolean>;  readonly override contentVisible: WritableSignal<boolean>;  readonly override preserveContent: ModelSignal<boolean>;}
    
    

element

HTMLElement

A reference to the host element.

id

InputSignal<any>

A unique identifier for the tree item.

value

InputSignal<V>

The value of the tree item.

parent

InputSignal<Tree<V> | TreeItemGroup<V>>

The parent tree root or tree item group.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the tree item is disabled.

selectable

InputSignal<boolean>

Whether the tree item is selectable.

expanded

ModelSignal<boolean>

Whether the tree item is expanded.

label

InputSignal<string | undefined>

Optional label for typeahead. Defaults to the element's textContent.

searchTerm

Signal<string>

Search term for typeahead.

tree

Signal<Tree<V>>

The tree root.

active

Signal<boolean>

Whether the item is active.

level

Signal<number>

The level of the current item in a tree.

selected

Signal<boolean | undefined>

Whether the item is selected.

visible

Signal<boolean>

Whether this item is visible due to all of its parents being expanded.

ngOnInit

void
@returnsvoid

ngOnDestroy

void
@returnsvoid

contentVisible

WritableSignal<boolean>

preserveContent

ModelSignal<boolean>

Description

A selectable and expandable item in an ngTree.

The ngTreeItem directive represents an individual node within an ngTree. It can be selected, expanded (if it has children), and disabled. The parent input establishes the hierarchical relationship within the tree.

<li ngTreeItem [parent]="parentTreeOrGroup" value="item-id" label="Item Label">  Item Label</li>
Jump to details