Class UITreeView<T>

A hierarchical tree-view component driven by an ITreeDatasource.

Supports expand/collapse, single/multiple selection, keyboard navigation (arrows, Enter, Space), ARIA tree pattern, and optional custom node templates via content projection.

Basic usage

<ui-tree-view [datasource]="ds" [displayWith]="nodeLabel" />

With custom template

<ui-tree-view [datasource]="ds">
  <ng-template #nodeTemplate let-node>
    <ui-icon [svg]="node.icon" [size]="16" />
    <span>{{ node.data.name }}</span>
  </ng-template>
</ui-tree-view>

Type Parameters

T = unknown

Implements

TreeKeyboardDelegate

Index

Constructors

constructor

new UITreeView<T = unknown>(): UITreeView<T>
Type Parameters
- T = unknown
Returns UITreeView<T>

Properties

`Readonly`ariaLabel

ariaLabel: InputSignal<string> = ...

Accessible label for the tree.

`Readonly`datasource

datasource: InputSignal<ITreeDatasource<T>> = ...

The datasource providing the tree structure.

`Readonly`disabled

disabled: InputSignal<boolean> = ...

Whether the tree view is disabled.

`Readonly`displayWith

displayWith: InputSignal<(data: T) => string> = ...

Function that returns a display string for a node's data. Used when no custom #nodeTemplate is projected. Defaults to String(node.data).

`Readonly`filterPredicate

filterPredicate: InputSignal<Predicate<T> | null | undefined> = ...

Optional predicate applied to each node's data payload.

When set, only nodes that satisfy the predicate (or whose descendants satisfy it) are rendered. Ancestor nodes of matching descendants are kept visible and auto-expanded so the user can see the full path.

Pass undefined or null to clear the filter.

`Readonly`nodeActivated

nodeActivated: OutputEmitterRef<TreeNode<T>> = ...

Emits when a node is activated (double-click or Enter on selected node).

`Readonly`nodeCollapsed

nodeCollapsed: OutputEmitterRef<TreeNode<T>> = ...

Emits the node when a node is collapsed.

`Readonly`nodeExpanded

nodeExpanded: OutputEmitterRef<TreeNode<T>> = ...

Emits the node when a node is expanded.

`Readonly`nodeTemplate

nodeTemplate: Signal<TemplateRef<TreeNodeContext<T>> | undefined> = ...

Optional consumer-projected template for rendering each node's content. Receives TreeNodeContext as its context.

`Readonly`selected

selected: ModelSignal<readonly TreeNode<T>[]> = ...

The currently selected node(s). Two-way bindable via [(selected)].

Arrow keys replace the selection with the cursor node.
Shift + arrows extend the selection.
Ctrl / ⌘ + click toggles individual nodes.
Escape clears the selection.

`Readonly`sortComparator

sortComparator: InputSignal<
    ((a: TreeNode<T>, b: TreeNode<T>) => number)
    | null
    | undefined,
> = ...

Optional comparator for sorting tree nodes at all levels.

When set, nodes are sorted at the root level and all descendants are recursively sorted using this comparator. The comparator receives two TreeNode values and should return a negative, zero, or positive number indicating their sort order.

Pass undefined or null to clear the sort and restore insertion order.

Example

sortComparator: (a, b) => a.data.name.localeCompare(b.data.name)

Methods

collapse

collapse(node: TreeNode<T>): void
Collapses the given node.
Parameters
- node: TreeNode<T>
Returns void
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:226

collapseAll

collapseAll(): void
Collapses all nodes in the tree.

Returns void
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:282

expand

expand(node: TreeNode<T>): void
Expands the given node.
Parameters
- node: TreeNode<T>
Returns void
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:212

expandAll

expandAll(): void
Expands all nodes in the tree recursively.

Returns void
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:264

isExpanded

isExpanded(node: TreeNode<T>): boolean
Returns whether the given node is currently expanded.
Parameters
- node: TreeNode<T>
Returns boolean
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:245

isSelected

isSelected(node: TreeNode<T>): boolean
Returns whether the given node is currently selected.
Parameters
- node: TreeNode<T>
Returns boolean
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:250

select

select(node: TreeNode<T>): void
Selects the given node, replacing any existing selection.
Parameters
- node: TreeNode<T>
Returns void
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:255

toggleExpand

toggleExpand(node: TreeNode<T>): void
Toggles the expanded state of the given node.
Parameters
- node: TreeNode<T>
Returns void
- Defined in packages/ui-kit/src/lib/tree-view/tree-view.component.ts:236

Class UITreeView<T>

Basic usage

With custom template

Type Parameters

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Returns UITreeView<T>

Properties

ReadonlyariaLabel

Readonlydatasource

Readonlydisabled

ReadonlydisplayWith

ReadonlyfilterPredicate

ReadonlynodeActivated

ReadonlynodeCollapsed

ReadonlynodeExpanded

ReadonlynodeTemplate

Readonlyselected

ReadonlysortComparator

Example

Methods

collapse

Parameters

Returns void

collapseAll

Returns void

expand

Parameters

Returns void

expandAll

Returns void

isExpanded

Parameters

Returns boolean

isSelected

Parameters

Returns boolean

select

Parameters

Returns void

toggleExpand

Parameters

Returns void

Settings

On This Page

`Readonly`ariaLabel

`Readonly`datasource

`Readonly`disabled

`Readonly`displayWith

`Readonly`filterPredicate

`Readonly`nodeActivated

`Readonly`nodeCollapsed

`Readonly`nodeExpanded

`Readonly`nodeTemplate

`Readonly`selected

`Readonly`sortComparator