Tree

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

disabled: boolean

Whether the component is disabled.

@Input()

role: 'treeitem' | 'group'

Wrapper for the CdkTree node definition with Material design styles.

Selector: [matTreeNodeDef]

Properties
NameDescription
@Input('matTreeNode')

data: T

Wrapper for the CdkTree nested node with Material design styles.

Selector: mat-nested-tree-node

Exported as: matNestedTreeNode
Properties
NameDescription
@Input()

disabled: boolean

Whether the component is disabled.

@Input('matNestedTreeNode')

node: T

nodeOutlet: QueryList<MatTreeNodeOutlet>

Wrapper for the CdkTree padding with Material design styles.

Selector: [matTreeNodePadding]

Properties
NameDescription
@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.

Wrapper for the CdkTable with Material design styles.

Selector: mat-tree

Exported as: matTree

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

Selector: [matTreeNodeToggle]

Properties
NameDescription
@Input('matTreeNodeToggleRecursive')

recursive: boolean

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

Selector: [matTreeNodeOutlet]

Properties
NameDescription

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

Properties
NameDescription

getChildren: (node: T) => Observable<T[]> | T[]

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[]

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
NameDescription

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
NameDescription

data: T[]

Data for the nested tree

Methods
connect
Parameters

collectionViewer

CollectionViewer

Returns
Observable<T[]>

disconnect