API for tree

API reference for Angular Material tree

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

Wrapper for the CdkTree node with Material design styles.

Selector: mat-tree-node

Exported as: matTreeNode
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 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

@Input({ transform: booleanAttribute })
Deprecated

disabled: boolean

Whether the component is disabled.

@Input()
Deprecated

role: 'treeitem' | 'group'

The role of the tree node.

@Input({ transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)), alias: 'tabIndex', })
Deprecated

tabIndexInputBinding: number

The tabindex of the tree node.

Deprecated

defaultTabIndex: 0

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.

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

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.

Wrapper for the CdkTree nested node with Material design styles.

Selector: mat-nested-tree-node

Exported as: matNestedTreeNode
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('matNestedTreeNode')

node: T

@Input('cdkTreeNodeTypeaheadLabel')

typeaheadLabel: string | null

The text used to locate this item during typeahead. If not specified, the textContent will 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({ transform: booleanAttribute })
Deprecated

disabled: boolean

Whether the node is disabled.

@Input()
Deprecated

role: 'treeitem' | 'group'

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.

Wrapper for the CdkTree padding with Material design styles.

Selector: [matTreeNodePadding]

Properties
Name Description
@Input('matTreeNodePaddingIndent')

indent: number | string

The indent for each level. Default number 40px from material design menu sub-menu spec.

@Input({ alias: 'matTreeNodePadding', 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.

Wrapper for the CdkTable with Material design styles.

Selector: mat-tree

Exported as: matTree
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

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

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

Selector: [matTreeNodeToggle]

Properties
Name Description
@Input(matTreeNodeToggleRecursive)

recursive: boolean

Whether expand/collapse the node recursively.

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

Selector: [matTreeNodeOutlet]

Properties
Name Description

viewContainer: inject(ViewContainerRef)

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.

Deprecated
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, 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 structuredData may be different from that of returned list F[].

Parameters

structuredData

T[]

Returns
F[]

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.

Deprecated
Properties
Name Description

data: T[]

Methods
connect
Parameters

collectionViewer

CollectionViewer

Returns
Observable<F[]>

disconnect

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
Azure & Blue theme selected.