API for tree

API reference for Angular CDK tree

import {CdkTreeModule} from '@angular/cdk/tree';

Nested node is a child of <cdk-tree>. It works with nested tree. By using cdk-nested-tree-node component in tree node template, children of the parent node will be added in the cdkTreeNodeOutlet in tree node template. The children of node will be automatically added to cdkTreeNodeOutlet.

Selector: cdk-nested-tree-node

Exported as: cdkNestedTreeNode
Properties
Name Description
@Input({ transform: booleanAttribute })

isDisabled: boolean

Whether or not this node is disabled. If it's disabled, then the user won't be able to focus or activate this node.

@Input({ transform: booleanAttribute })

isExpandable: boolean

Whether or not this node is expandable.

If not using FlatTreeControl, or if isExpandable is not provided to NestedTreeControl, this should be provided for correct node a11y.

@Input()

isExpanded: boolean

@Input('cdkTreeNodeTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during typeahead. If not specified, the textContent will will be used.

@Output()

activation: EventEmitter<T>

This emits when the node has been programatically activated or activated by keyboard.

@Output()

expandedChange: EventEmitter<boolean>

This emits when the node's expansion status has been changed.

data: T

The tree node's data.

isLeafNode: boolean

level: number

nodeOutlet: QueryList<CdkTreeNodeOutlet>

The children node placeholder.

@Input()
Deprecated

role: 'treeitem' | 'group'

The role of the tree node.

Methods
activate

Emits an activation event. Implemented for TreeKeyManagerItem.

collapse

Collapses this data node. Implemented for TreeKeyManagerItem.

expand

Expands this data node. Implemented for TreeKeyManagerItem.

focus

Focuses this data node. Implemented for TreeKeyManagerItem.

getChildren
Returns
CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>

getLabel
Returns
string

getParent
Returns
CdkTreeNode<T, K> | null

makeFocusable

Makes the node focusable. Implemented for TreeKeyManagerItem.

unfocus

Defocus this data node.

updateChildrenNodes

Add children dataNodes to the NodeOutlet

Parameters

children?

T[]

Data node definition for the CdkTree. Captures the node's template and a when predicate that describes when this node should be used.

Selector: [cdkTreeNodeDef]

Properties
Name Description
@Input(cdkTreeNodeDefWhen)

when: (index: number, nodeData: T) => boolean

Function that should return true if this node template should be used for the provided node data and index. If left undefined, this node will be considered the default node template to use when no other when functions return true for the data. For every node, there must be at least one when function that passes or an undefined to default.

Indent for the children tree dataNodes. This directive will add left-padding to the node to show hierarchy.

Selector: [cdkTreeNodePadding]

Properties
Name Description
@Input('cdkTreeNodePaddingIndent')

indent: number | string

The indent for each level. Can be a number or a CSS string. Default number 40px from material design menu sub-menu spec.

@Input({ alias: 'cdkTreeNodePadding', transform: numberAttribute })

level: number

The level of depth of the tree node. The padding will be level * indent pixels.

indentUnits: 'px'

CSS units used for the indentation value.

Outlet for nested CdkNode. Put [cdkTreeNodeOutlet] on a tag to place children dataNodes inside the outlet.

Selector: [cdkTreeNodeOutlet]

Properties
Name Description

viewContainer: inject(ViewContainerRef)

CDK tree component that connects with a data source to retrieve data of type T and renders dataNodes with hierarchy. Updates the dataNodes when new data is provided by the data source.

Selector: cdk-tree

Exported as: cdkTree
Properties
Name Description
@Input()

childrenAccessor: (dataNode: T) => T[] | Observable<T[]>

Given a data node, determines what the children of that node are.

One of levelAccessor or childrenAccessor must be specified, not both. This is enforced at run-time.

@Input()

dataSource: DataSource<T> | Observable<T[]> | T[]

Provides a stream containing the latest data array to render. Influenced by the tree's stream of view window (what dataNodes are currently on screen). Data source can be an observable of data array, or a data array to render.

@Input()

expansionKey: (dataNode: T) => K

Given a data node, determines the key by which we determine whether or not this node is expanded.

@Input()

levelAccessor: (dataNode: T) => number

Given a data node, determines what tree level the node is at.

One of levelAccessor or childrenAccessor must be specified, not both. This is enforced at run-time.

@Input()

trackBy: TrackByFunction<T>

Tracking function that will be used to check the differences in data changes. Used similarly to ngFor trackBy function. Optimize node operations by identifying a node based on its data relative to the function to know if a node should be added/removed/moved. Accepts a function that takes two parameters, index and item.

viewChange: BehaviorSubject<{ start: number; end: number; }>

Stream containing the latest information on what rows are being displayed on screen. Can be used by the data source to as a heuristic of what data should be provided.

@Input()
Deprecated

treeControl: TreeControl<T, K>

The tree controller

Methods
collapse

Collapse the data node. If it is already collapsed, does nothing.

Parameters

dataNode

T

collapseAll

Collapse all data nodes in the tree.

collapseDescendants

Collapse the data node and all its descendants. If it is already collapsed, does nothing.

Parameters

dataNode

T

expand

Expand the data node. If it is already expanded, does nothing.

Parameters

dataNode

T

expandAll

Expands all data nodes in the tree.

expandDescendants

Expand the data node and all its descendants. If they are already expanded, does nothing.

Parameters

dataNode

T

insertNode

Create the embedded view for the data node template and place it in the correct index location within the data node view container.

Parameters

nodeData

T

index

number

viewContainer?

ViewContainerRef

parentData?

T

isExpanded

Whether the data node is expanded or collapsed. Returns true if it's expanded.

Parameters

dataNode

T

Returns
boolean

renderNodeChanges

Check for changes made in the data and render each change (node added/removed/moved).

Parameters

data

readonly T[]

dataDiffer

IterableDiffer<T> = this._dataDiffer

viewContainer

ViewContainerRef = this._nodeOutlet.viewContainer

parentData?

T

toggle

If the data node is currently expanded, collapse it. Otherwise, expand it.

Parameters

dataNode

T

toggleDescendants

If the data node is currently expanded, collapse it and all its descendants. Otherwise, expand it and all its descendants.

Parameters

dataNode

T

Tree node for CdkTree. It contains the data in the tree node.

Selector: cdk-tree-node

Exported as: cdkTreeNode
Properties
Name Description
@Input({ transform: booleanAttribute })

isDisabled: boolean

Whether or not this node is disabled. If it's disabled, then the user won't be able to focus or activate this node.

@Input({ transform: booleanAttribute })

isExpandable: boolean

Whether or not this node is expandable.

If not using FlatTreeControl, or if isExpandable is not provided to NestedTreeControl, this should be provided for correct node a11y.

@Input()

isExpanded: boolean

@Input('cdkTreeNodeTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during typeahead. If not specified, the textContent will will be used.

@Output()

activation: EventEmitter<T>

This emits when the node has been programatically activated or activated by keyboard.

@Output()

expandedChange: EventEmitter<boolean>

This emits when the node's expansion status has been changed.

data: T

The tree node's data.

isLeafNode: boolean

level: number

static mostRecentTreeNode: CdkTreeNode<any> | null

The most recently created CdkTreeNode. We save it in static variable so we can retrieve it in CdkTree and set the data to it.

@Input()
Deprecated

role: 'treeitem' | 'group'

The role of the tree node.

Methods
activate

Emits an activation event. Implemented for TreeKeyManagerItem.

collapse

Collapses this data node. Implemented for TreeKeyManagerItem.

expand

Expands this data node. Implemented for TreeKeyManagerItem.

focus

Focuses this data node. Implemented for TreeKeyManagerItem.

getChildren
Returns
CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>

getLabel
Returns
string

getParent
Returns
CdkTreeNode<T, K> | null

makeFocusable

Makes the node focusable. Implemented for TreeKeyManagerItem.

unfocus

Defocus this data node.

Node toggle to expand and collapse the node.

Selector: [cdkTreeNodeToggle]

Properties
Name Description
@Input({ alias: 'cdkTreeNodeToggleRecursive', transform: booleanAttribute })

recursive: boolean

Whether expand/collapse the node recursively.

Base tree control. It has basic toggle/expand/collapse operations on a single data node.

Deprecated
Properties
Name Description

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<K>

A selection model with multi-selection to track expansion status.

getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null

Gets a stream that emits whenever the given data node's children change.

getLevel: (dataNode: T) => number

Get depth of a given data node, return the level number. This is for flat tree node.

isExpandable: (dataNode: T) => boolean

Whether the data node is expandable. Returns true if expandable. This is for flat tree node.

trackBy: (dataNode: T) => K

Returns the identifier by which a dataNode should be tracked, should its reference change.

Similar to trackBy for *ngFor

Methods
collapse

Collapses one single data node.

Parameters

dataNode

T

collapseAll

Collapse all dataNodes in the tree.

collapseDescendants

Collapses a subtree rooted at given data node recursively.

Parameters

dataNode

T

expand

Expands one single data node.

Parameters

dataNode

T

expandAll

Expands all data nodes in the tree.

expandDescendants

Expands a subtree rooted at given data node recursively.

Parameters

dataNode

T

getDescendants

Gets a list of descendent data nodes of a subtree rooted at given data node recursively.

Parameters

dataNode

T

Returns
T[]

isExpanded

Whether a given data node is expanded or not. Returns true if the data node is expanded.

Parameters

dataNode

T

Returns
boolean

toggle

Toggles one single data node's expanded/collapsed state.

Parameters

dataNode

T

toggleDescendants

Toggles a subtree rooted at node recursively.

Parameters

dataNode

T

Flat tree control. Able to expand/collapse a subtree recursively for flattened tree.

Deprecated
Properties
Name Description

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<K>

A selection model with multi-selection to track expansion status.

getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null

Gets a stream that emits whenever the given data node's children change.

getLevel: (dataNode: T) => number

isExpandable: (dataNode: T) => boolean

options: FlatTreeControlOptions<T, K>

trackBy: (dataNode: T) => K

Returns the identifier by which a dataNode should be tracked, should its reference change.

Similar to trackBy for *ngFor

Methods
collapse

Collapses one single data node.

Parameters

dataNode

T

collapseAll

Collapse all dataNodes in the tree.

collapseDescendants

Collapses a subtree rooted at given data node recursively.

Parameters

dataNode

T

expand

Expands one single data node.

Parameters

dataNode

T

expandAll

Expands all data nodes in the tree.

To make this working, the dataNodes variable of the TreeControl must be set to all flattened data nodes of the tree.

expandDescendants

Expands a subtree rooted at given data node recursively.

Parameters

dataNode

T

getDescendants

Gets a list of the data node's subtree of descendent data nodes.

To make this working, the dataNodes of the TreeControl must be flattened tree nodes with correct levels.

Parameters

dataNode

T

Returns
T[]

isExpanded

Whether a given data node is expanded or not. Returns true if the data node is expanded.

Parameters

dataNode

T

Returns
boolean

toggle

Toggles one single data node's expanded/collapsed state.

Parameters

dataNode

T

toggleDescendants

Toggles a subtree rooted at node recursively.

Parameters

dataNode

T

Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type.

Deprecated
Properties
Name Description

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<K>

A selection model with multi-selection to track expansion status.

getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null

getLevel: (dataNode: T) => number

Get depth of a given data node, return the level number. This is for flat tree node.

isExpandable: (dataNode: T) => boolean

Whether the data node is expandable. Returns true if expandable. This is for flat tree node.

options: NestedTreeControlOptions<T, K>

trackBy: (dataNode: T) => K

Returns the identifier by which a dataNode should be tracked, should its reference change.

Similar to trackBy for *ngFor

Methods
collapse

Collapses one single data node.

Parameters

dataNode

T

collapseAll

Collapse all dataNodes in the tree.

collapseDescendants

Collapses a subtree rooted at given data node recursively.

Parameters

dataNode

T

expand

Expands one single data node.

Parameters

dataNode

T

expandAll

Expands all dataNodes in the tree.

To make this working, the dataNodes variable of the TreeControl must be set to all root level data nodes of the tree.

expandDescendants

Expands a subtree rooted at given data node recursively.

Parameters

dataNode

T

getDescendants

Gets a list of descendant dataNodes of a subtree rooted at given data node recursively.

Parameters

dataNode

T

Returns
T[]

isExpanded

Whether a given data node is expanded or not. Returns true if the data node is expanded.

Parameters

dataNode

T

Returns
boolean

toggle

Toggles one single data node's expanded/collapsed state.

Parameters

dataNode

T

toggleDescendants

Toggles a subtree rooted at node recursively.

Parameters

dataNode

T

Context provided to the tree node component.

Properties
Name Description

$implicit: T

Data for the node.

count: number

Length of the number of total dataNodes.

index: number

Index location of the node.

level: number

Depth of the node.

Optional set of configuration that can be provided to the FlatTreeControl.

Properties
Name Description

trackBy: (dataNode: T) => K

Optional set of configuration that can be provided to the NestedTreeControl.

Properties
Name Description

isExpandable: (dataNode: T) => boolean

Function to determine if the provided node is expandable.

trackBy: (dataNode: T) => K

Tree control interface. User can implement TreeControl to expand/collapse dataNodes in the tree. The CDKTree will use this TreeControl to expand/collapse a node. User can also use it outside the <cdk-tree> to control the expansion status of the tree.

Deprecated
Properties
Name Description

dataNodes: T[]

The saved tree nodes data for expandAll action.

expansionModel: SelectionModel<K>

The expansion model

getChildren: (dataNode: T) => Observable<T[]> | T[] | undefined | null

Gets a stream that emits whenever the given data node's children change.

getLevel: (dataNode: T) => number

Get depth of a given data node, return the level number. This is for flat tree node.

isExpandable: (dataNode: T) => boolean

Whether the data node is expandable. Returns true if expandable. This is for flat tree node.

Methods
collapse

Collapse one data node

Parameters

dataNode

T

collapseAll

Collapse all the dataNodes in the tree

collapseDescendants

Collapse a data node and all its descendants

Parameters

dataNode

T

expand

Expand one data node

Parameters

dataNode

T

expandAll

Expand all the dataNodes in the tree

expandDescendants

Expand a data node and all its descendants

Parameters

dataNode

T

getDescendants

Get all descendants of a data node

Parameters

dataNode

T

Returns
any[]

isExpanded

Whether the data node is expanded or collapsed. Return true if it's expanded.

Parameters

dataNode

T

Returns
boolean

toggle

Expand or collapse data node

Parameters

dataNode

T

toggleDescendants

Toggle a data node by expand/collapse it and all its descendants

Parameters

dataNode

T

Azure & Blue theme selected.