Tree

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. For example:

<cdk-nested-tree-node>
  {{node.name}}
  <ng-template cdkTreeNodeOutlet></ng-template>
</cdk-nested-tree-node>

The children of node will be automatically added to cdkTreeNodeOutlet, the result dom will be like this:

<cdk-nested-tree-node>
  {{node.name}}
   <cdk-nested-tree-node>{{child1.name}}</cdk-nested-tree-node>
   <cdk-nested-tree-node>{{child2.name}}</cdk-nested-tree-node>
</cdk-nested-tree-node>

Selector: cdk-nested-tree-node

Exported as: cdkNestedTreeNode
Properties
Name Description
@Input()

role: 'treeitem' | 'group'

The role of the node should be 'group' if it's an internal node, and 'treeitem' if it's a leaf node.

data: T

The tree node's data.

isExpanded: boolean

level: number

nodeOutlet: QueryList<CdkTreeNodeOutlet>

The children node placeholder.
Methods
focus

Focuses the menu item. Implements for FocusableOption.
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.

template: TemplateRef<any>

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('cdkTreeNodePadding')

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

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

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.
@Input()

treeControl: TreeControl<T>

The tree controller

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.
Methods
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

renderNodeChanges

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

data

T[] | ReadonlyArray<T>

dataDiffer

IterableDiffer<T> = this._dataDiffer

viewContainer

ViewContainerRef = this._nodeOutlet.viewContainer

parentData?

T

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

Selector: cdk-tree-node

Exported as: cdkTreeNode
Properties
Name Description
@Input()

role: 'treeitem' | 'group'

The role of the node should be 'group' if it's an internal node, and 'treeitem' if it's a leaf node.

data: T

The tree node's data.

isExpanded: boolean

level: number

Methods
focus

Focuses the menu item. Implements for FocusableOption.

Node toggle to expand/collapse the node.

Selector: [cdkTreeNodeToggle]

Properties
Name Description
@Input('cdkTreeNodeToggleRecursive')

recursive: boolean

Whether expand/collapse the node recursively.

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

Properties
Name Description

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<T>

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.
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.

Properties
Name Description

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<T>

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

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.

Properties
Name Description

dataNodes: T[]

Saved data node for expandAll action.

expansionModel: SelectionModel<T>

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.
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.

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.

Properties
Name Description

dataNodes: T[]

The saved tree nodes data for expandAll action.

expansionModel: SelectionModel<T>

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