API reference for Angular Material tree
import {MatTreeModule} from '@angular/material/tree';
Directives
MatTreeNode
extends
CdkTreeNode
Wrapper for the CdkTree node with Material design styles.
Selector: mat-tree-node
Exported as: matTreeNodeProperties
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. |
|
|
|
|
@Input({ transform: booleanAttribute })
Deprecated
|
Whether the component is disabled. |
@Input()
Deprecated
|
The role of the tree node. |
@Input({
transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),
alias: 'tabIndex',
})
Deprecated
|
The tabindex of the tree node. |
Deprecated
|
The default tabindex 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. |
MatTreeNodeDef
extends
CdkTreeNodeDef
Wrapper for the CdkTree node definition with Material design styles. Captures the node's template and a when predicate that describes when this node should be used.
Selector: [matTreeNodeDef]
Properties
Name | Description |
---|---|
@Input('matTreeNode')
|
|
@Input(matTreeNodeDefWhen)
|
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. |
MatNestedTreeNode
extends
CdkNestedTreeNode
Wrapper for the CdkTree nested node with Material design styles.
Selector: mat-nested-tree-node
Exported as: matNestedTreeNodeProperties
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('matNestedTreeNode')
|
|
@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({ transform: booleanAttribute })
Deprecated
|
Whether the node is disabled. |
@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. |
MatTreeNodePadding
extends
CdkTreeNodePadding
Wrapper for the CdkTree padding with Material design styles.
Selector: [matTreeNodePadding]
Properties
Name | Description |
---|---|
@Input('matTreeNodePaddingIndent')
|
The indent for each level. Default number 40px from material design menu sub-menu spec. |
@Input({ alias: 'matTreeNodePadding', transform: numberAttribute })
|
The level of depth of the tree node. The padding will be |
|
CSS units used for the indentation value. |
MatTree
extends
CdkTree
Wrapper for the CdkTable with Material design styles.
Selector: mat-tree
Exported as: matTreeProperties
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
|
|
MatTreeNodeToggle
extends
CdkTreeNodeToggle
Wrapper for the CdkTree's toggle with Material design styles.
Selector: [matTreeNodeToggle]
Properties
Name | Description |
---|---|
@Input(matTreeNodeToggleRecursive)
|
Whether expand/collapse the node recursively. |
MatTreeNodeOutlet
Outlet for nested CdkNode. Put [matTreeNodeOutlet]
on a tag to place children dataNodes
inside the outlet.
Selector: [matTreeNodeOutlet]
Properties
Name | Description |
---|---|
|
Classes
MatTreeFlattener
Tree flattener to convert a normal type of node to node with children & level information.
Transform nested nodes of type T
to flattened nodes of type F
.
For example, the input data of type T
is nested, and contains its children data:
SomeNode: {
key: 'Fruits',
children: [
NodeOne: {
key: 'Apple',
},
NodeTwo: {
key: 'Pear',
}
]
}
After flattener flatten the tree, the structure will become
SomeNode: {
key: 'Fruits',
expandable: true,
level: 1
},
NodeOne: {
key: 'Apple',
expandable: false,
level: 2
},
NodeTwo: {
key: 'Pear',
expandable: false,
level: 2
}
and the output flattened type is F
with additional information.
Properties
Name | Description |
---|---|
|
|
|
|
|
|
|
Methods
expandFlattenedNodes | |
---|---|
Expand flattened node with current expansion status. The returned list may have different length. |
|
Parameters | |
nodes F[]
|
|
treeControl TreeControl<F, K>
|
|
Returns | |
F[]
|
|
flattenNodes | |
---|---|
Flatten a list of node type T to flattened version of node F.
Please note that type T may be nested, and the length of |
|
Parameters | |
structuredData T[]
|
|
Returns | |
F[]
|
|
MatTreeFlatDataSource
extends
DataSource
Data source for flat tree.
The data source need to handle expansion/collapsion of the tree node and change the data feed
to MatTree
.
The nested tree nodes of type T
are flattened through MatTreeFlattener
, and converted
to type F
for MatTree
to consume.
Properties
Name | Description |
---|---|
|
Methods
connect | |
---|---|
Parameters | |
collectionViewer CollectionViewer
|
|
Returns | |
Observable<F[]>
|
|
disconnect |
---|
MatTreeNestedDataSource
extends
DataSource
Data source for nested tree.
The data source for nested tree doesn't have to consider node flattener, or the way to expand or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
Properties
Name | Description |
---|---|
|
Data for the nested tree |
Methods
connect | |
---|---|
Parameters | |
collectionViewer CollectionViewer
|
|
Returns | |
Observable<T[]>
|
|
disconnect |
---|