API reference for Angular CDK tree
import {CdkTreeModule} from '@angular/cdk/tree';
Directives
CdkNestedTreeNode
extends
CdkTreeNode
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: cdkNestedTreeNodeProperties
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
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 })
|
Whether or not this node is expandable. If not using |
@Input()
|
|
@Input('cdkTreeNodeTypeaheadLabel')
|
The text used to locate this item during typeahead. If not specified, the |
@Output()
|
This emits when the node has been programatically activated or activated by keyboard. |
@Output()
|
This emits when the node's expansion status has been changed. |
|
The tree node's data. |
|
|
|
|
|
The children node placeholder. |
@Input()
Deprecated
|
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[]
|
|
CdkTreeNodeDef
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)
|
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. |
CdkTreeNodePadding
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')
|
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 })
|
The level of depth of the tree node. The padding will be |
|
CSS units used for the indentation value. |
CdkTreeNodeOutlet
Outlet for nested CdkNode. Put [cdkTreeNodeOutlet]
on a tag to place children dataNodes
inside the outlet.
Selector: [cdkTreeNodeOutlet]
Properties
Name | Description |
---|---|
|
CdkTree
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: cdkTreeProperties
Name | Description |
---|---|
@Input()
|
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()
|
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()
|
Given a data node, determines the key by which we determine whether or not this node is expanded. |
@Input()
|
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()
|
Tracking function that will be used to check the differences in data changes. Used similarly
to |
|
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
|
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
|
|
CdkTreeNode
Tree node for CdkTree. It contains the data in the tree node.
Selector: cdk-tree-node
Exported as: cdkTreeNodeProperties
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
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 })
|
Whether or not this node is expandable. If not using |
@Input()
|
|
@Input('cdkTreeNodeTypeaheadLabel')
|
The text used to locate this item during typeahead. If not specified, the |
@Output()
|
This emits when the node has been programatically activated or activated by keyboard. |
@Output()
|
This emits when the node's expansion status has been changed. |
|
The tree node's data. |
|
|
|
|
|
The most recently created |
@Input()
Deprecated
|
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. |
CdkTreeNodeToggle
Node toggle to expand and collapse the node.
Selector: [cdkTreeNodeToggle]
Properties
Name | Description |
---|---|
@Input({ alias: 'cdkTreeNodeToggleRecursive', transform: booleanAttribute })
|
Whether expand/collapse the node recursively. |
Classes
BaseTreeControl
Base tree control. It has basic toggle/expand/collapse operations on a single data node.
Properties
Name | Description |
---|---|
|
Saved data node for |
|
A selection model with multi-selection to track expansion status. |
|
Gets a stream that emits whenever the given data node's children change. |
|
Get depth of a given data node, return the level number. This is for flat tree node. |
|
Whether the data node is expandable. Returns true if expandable. This is for flat tree node. |
|
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 |
|
Parameters | |
dataNode T
|
|
FlatTreeControl
extends
BaseTreeControl
Flat tree control. Able to expand/collapse a subtree recursively for flattened tree.
Properties
Name | Description |
---|---|
|
Saved data node for |
|
A selection model with multi-selection to track expansion status. |
|
Gets a stream that emits whenever the given data node's children change. |
|
|
|
|
|
|
|
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 |
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 |
|
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 |
|
Parameters | |
dataNode T
|
|
NestedTreeControl
extends
BaseTreeControl
Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type.
Properties
Name | Description |
---|---|
|
Saved data node for |
|
A selection model with multi-selection to track expansion status. |
|
|
|
Get depth of a given data node, return the level number. This is for flat tree node. |
|
Whether the data node is expandable. Returns true if expandable. This is for flat tree node. |
|
|
|
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 |
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 |
|
Parameters | |
dataNode T
|
|
CdkTreeNodeOutletContext
Context provided to the tree node component.
Properties
Name | Description |
---|---|
|
Data for the node. |
|
Length of the number of total dataNodes. |
|
Index location of the node. |
|
Depth of the node. |
Interfaces
FlatTreeControlOptions
Optional set of configuration that can be provided to the FlatTreeControl.
Properties
Name | Description |
---|---|
|
NestedTreeControlOptions
Optional set of configuration that can be provided to the NestedTreeControl.
Properties
Name | Description |
---|---|
|
Function to determine if the provided node is expandable. |
|
TreeControl
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 |
---|---|
|
The saved tree nodes data for |
|
The expansion model |
|
Gets a stream that emits whenever the given data node's children change. |
|
Get depth of a given data node, return the level number. This is for flat tree node. |
|
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
|
|