Tree

API reference for Angular Material tree

import {MatTreeModule} from '@angular/material/tree';

link Directives

link MatTreeNode

Wrapper for the CdkTree node with Material design styles.

Selector: mat-tree-node

Exported as: matTreeNode

Properties

Name	Description
@Input() disabled: boolean	Whether the component is disabled.
@Input() role: 'treeitem' | 'group'

link MatTreeNodeDef extends CdkTreeNodeDef

Wrapper for the CdkTree node definition with Material design styles.

Selector: [matTreeNodeDef]

Properties

Name	Description
@Input('matTreeNode') data: T
@Input( matTreeNodeDefWhen) 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>

link MatNestedTreeNode

Wrapper for the CdkTree nested node with Material design styles.

Selector: mat-nested-tree-node

Exported as: matNestedTreeNode

Properties

Name	Description
@Input() disabled: boolean	Whether the component is disabled.
@Input('matNestedTreeNode') node: T
nodeOutlet: QueryList<MatTreeNodeOutlet>	The children node placeholder.

link MatTreeNodePadding extends CdkTreeNodePadding

Wrapper for the CdkTree padding with Material design styles.

Selector: [matTreeNodePadding]

Properties

Name	Description
@Input('matTreeNodePaddingIndent') indent: number	The indent for each level. Default number 40px from material design menu sub-menu spec.
@Input('matTreeNodePadding') 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.

link MatTree extends CdkTree

Wrapper for the CdkTable with Material design styles.

Selector: mat-tree

Exported as: matTree

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

link MatTreeNodeToggle extends CdkTreeNodeToggle

Wrapper for the CdkTree's toggle with Material design styles.

Selector: [matTreeNodeToggle]

Properties

Name	Description
@Input('matTreeNodeToggleRecursive') recursive: boolean

link MatTreeNodeOutlet

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

Selector: [matTreeNodeOutlet]

Properties

Name	Description
viewContainer: ViewContainerRef

link Classes

link 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
getChildren: (node: T) => Observable<T[]> | T[] | undefined | null
getLevel: (node: F) => number
isExpandable: (node: F) => boolean
transformFunction: (node: T, level: number) => F

Methods

expandFlattenedNodes
Expand flattened node with current expansion status. The returned list may have different length.
Parameters
nodes F[]
treeControl TreeControl<F>
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 structuredData may be different from that of returned list F[].
Parameters
structuredData T[]
Returns
F[]

link 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
data: T[]

Methods

connect
Parameters
collectionViewer CollectionViewer
Returns
Observable<F[]>

disconnect

link 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: T[]	Data for the nested tree

Methods

connect
Parameters
collectionViewer CollectionViewer
Returns
Observable<T[]>

disconnect