<link rel="stylesheet" href="/styles-2YLIEYNE.css">
This site uses cookies from Google to deliver its services and to analyze traffic.
More details
Accessibility
Accordion
Bidirectionality
Clipboard
Coercion
Collections
Component Harnesses
Dialog
Drag and Drop
 Layout
Listbox
Menu
Observers
Overlay
Platform
Portal
Scrolling
Stepper
Table
Text Field
Tree
API for tree

API reference for Angular CDK tree

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

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 (dataNode: T): void

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

dataNode

T

collapseAll (): void

Collapse all data nodes in the tree.
collapseDescendants (dataNode: T): void

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

dataNode

T

expand (dataNode: T): void

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

dataNode

T

expandAll (): void

Expands all data nodes in the tree.
expandDescendants (dataNode: T): void

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

dataNode

T

insertNode (nodeData: T, index: number, viewContainer?: ViewContainerRef, parentData?: T):

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 (dataNode: T): boolean

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

dataNode

T

Returns
boolean

renderNodeChanges (data: readonly T[], dataDiffer: IterableDiffer<T> = this._dataDiffer, viewContainer: ViewContainerRef = this._nodeOutlet.viewContainer, parentData?: T):

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 (dataNode: T): void

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

dataNode

T

toggleDescendants (dataNode: T): void

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

dataNode

T

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 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 (): void

Emits an activation event. Implemented for TreeKeyManagerItem.
collapse (): void

Collapses this data node. Implemented for TreeKeyManagerItem.
expand (): void

Expands this data node. Implemented for TreeKeyManagerItem.
focus (): void

Focuses this data node. Implemented for TreeKeyManagerItem.
getChildren (): CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>
Returns
CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>

getLabel (): string
Returns
string

getParent (): CdkTreeNode<T, K> | null
Returns
CdkTreeNode<T, K> | null

makeFocusable (): void

Makes the node focusable. Implemented for TreeKeyManagerItem.
unfocus (): void

Defocus this data node.
updateChildrenNodes (children?: T[]): void

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)

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 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 (): void

Emits an activation event. Implemented for TreeKeyManagerItem.
collapse (): void

Collapses this data node. Implemented for TreeKeyManagerItem.
expand (): void

Expands this data node. Implemented for TreeKeyManagerItem.
focus (): void

Focuses this data node. Implemented for TreeKeyManagerItem.
getChildren (): CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>
Returns
CdkTreeNode<T, K>[] | Observable<CdkTreeNode<T, K>[]>

getLabel (): string
Returns
string

getParent (): CdkTreeNode<T, K> | null
Returns
CdkTreeNode<T, K> | null

makeFocusable (): void

Makes the node focusable. Implemented for TreeKeyManagerItem.
unfocus (): void

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 (dataNode: T): void

Collapses one single data node.
Parameters

dataNode

T

collapseAll (): void

Collapse all dataNodes in the tree.
collapseDescendants (dataNode: T): void

Collapses a subtree rooted at given data node recursively.
Parameters

dataNode

T

expand (dataNode: T): void

Expands one single data node.
Parameters

dataNode

T

expandAll (): void

Expands all data nodes in the tree.
expandDescendants (dataNode: T): void

Expands a subtree rooted at given data node recursively.
Parameters

dataNode

T

getDescendants (dataNode: T): T[]

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

dataNode

T

Returns
T[]

isExpanded (dataNode: T): boolean

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

dataNode

T

Returns
boolean

toggle (dataNode: T): void

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

dataNode

T

toggleDescendants (dataNode: T): void

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 (dataNode: T): void

Collapses one single data node.
Parameters

dataNode

T

collapseAll (): void

Collapse all dataNodes in the tree.
collapseDescendants (dataNode: T): void

Collapses a subtree rooted at given data node recursively.
Parameters

dataNode

T

expand (dataNode: T): void

Expands one single data node.
Parameters

dataNode

T

expandAll (): void

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 (dataNode: T): void

Expands a subtree rooted at given data node recursively.
Parameters

dataNode

T

getDescendants (dataNode: T): T[]

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 (dataNode: T): boolean

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

dataNode

T

Returns
boolean

toggle (dataNode: T): void

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

dataNode

T

toggleDescendants (dataNode: T): void

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 (dataNode: T): void

Collapses one single data node.
Parameters

dataNode

T

collapseAll (): void

Collapse all dataNodes in the tree.
collapseDescendants (dataNode: T): void

Collapses a subtree rooted at given data node recursively.
Parameters

dataNode

T

expand (dataNode: T): void

Expands one single data node.
Parameters

dataNode

T

expandAll (): void

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 (dataNode: T): void

Expands a subtree rooted at given data node recursively.
Parameters

dataNode

T

getDescendants (dataNode: T): T[]

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

dataNode

T

Returns
T[]

isExpanded (dataNode: T): boolean

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

dataNode

T

Returns
boolean

toggle (dataNode: T): void

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

dataNode

T

toggleDescendants (dataNode: T): void

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 (dataNode: T): void

Collapse one data node
Parameters

dataNode

T

collapseAll (): void

Collapse all the dataNodes in the tree
collapseDescendants (dataNode: T): void

Collapse a data node and all its descendants
Parameters

dataNode

T

expand (dataNode: T): void

Expand one data node
Parameters

dataNode

T

expandAll (): void

Expand all the dataNodes in the tree
expandDescendants (dataNode: T): void

Expand a data node and all its descendants
Parameters

dataNode

T

getDescendants (dataNode: T): any[]

Get all descendants of a data node
Parameters

dataNode

T

Returns
any[]

isExpanded (dataNode: T): boolean

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

dataNode

T

Returns
boolean

toggle (dataNode: T): void

Expand or collapse data node
Parameters

dataNode

T

toggleDescendants (dataNode: T): void

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

dataNode

T

Azure & Blue theme selected.