Component · v2.7.0

NgbTreeComponent

Expandable tree with optional checkbox selection, text or JSON-style icons, and localizable labels.

Import

import { NgbTreeComponent } from '@angular-bootstrap/ngbootstrap';

Selector:ngb-tree

Usage notes

Tree is not an Angular form value accessor. Bind nodes and handle selectionChange to integrate with your application state.
Node disabled prevents checkbox interaction; it does not disable branch expansion. Selection is independent for each node.
Use a component reference to call expandAllNodes() or collapseAllNodes(). There is no expandedChange or selectedChange output.

Declaration

class NgbTreeComponent implements OnChanges

Inputs

`nodes`

Root nodes. Children are rendered recursively. Expansion and selection mutate the supplied node objects.

nodes: NgbTreeNode[]

Default:[]

`type`

Uses caret icons in text mode or plus/minus icons in json mode. Both modes consume NgbTreeNode arrays.

type: NgbTreeType

Default:'text'

`showCheckbox`

Shows a checkbox for each node. Selection does not automatically cascade to parents or children.

showCheckbox: boolean

Default:false

`i18n`

Overrides tree and action labels. Omitted values use the built-in English labels.

i18n?: NgbTreeI18n

`expandIcon`

Bootstrap icon class for a collapsed branch in text mode.

expandIcon: string

Default:'bi-caret-right-fill'

`collapseIcon`

Bootstrap icon class for an expanded branch in text mode.

collapseIcon: string

Default:'bi-caret-down-fill'

`plusIcon`

Bootstrap icon class for a collapsed branch in json mode.

plusIcon: string

Default:'bi-file-plus-fill'

`minusIcon`

Bootstrap icon class for an expanded branch in json mode.

minusIcon: string

Default:'bi-file-minus-fill'

Outputs

`expand`

Emits the node when a single branch is expanded. Expand all uses expandAll instead.

expand: EventEmitter<NgbTreeNode>

`collapse`

Emits the node when a single branch is collapsed. Collapse all uses collapseAll instead.

collapse: EventEmitter<NgbTreeNode>

`expandAll`

Emits after expandAllNodes expands all branches. There is no payload.

expandAll: EventEmitter<void>

`collapseAll`

Emits after collapseAllNodes collapses all branches. There is no payload.

collapseAll: EventEmitter<void>

`selectionChange`

Emits all selected nodes in the tree, including nodes inside collapsed branches.

selectionChange: EventEmitter<NgbTreeNode[]>

Properties

`nodeButtons`

View query for rendered branch-toggle buttons, used for keyboard focus.

nodeButtons: QueryList<ElementRef<HTMLButtonElement>>

`trackById`

Returns node.id to preserve rendered node identity.

trackById: (_: number, node: NgbTreeNode) => string

Methods

`hasChildren`

Returns whether the node has a nonempty children array.

hasChildren(node: NgbTreeNode): boolean

`toggleNode`

Toggles a branch and emits expand or collapse. Leaf nodes are unchanged.

toggleNode(node: NgbTreeNode): void

`toggleSelection`

Sets node.selected and emits the complete selection. It does not cascade or check disabled; the UI disables the checkbox.

toggleSelection(node: NgbTreeNode, value: boolean): void

`expandAllNodes`

Expands every branch recursively and emits expandAll once.

expandAllNodes(): void

`collapseAllNodes`

Collapses every branch recursively and emits collapseAll once.

collapseAllNodes(): void

`onNodeKeydown`

View keyboard handler: Enter/Space toggles a branch; Left/Right collapses/expands; Up/Down moves among rendered branch buttons.

onNodeKeydown(event: KeyboardEvent, node: NgbTreeNode): void

Referenced types

Source: src/tree/src/tree/tree.component.ts in the installed @angular-bootstrap/ngbootstrap package. Angular compiler metadata and private members are omitted.