import {MatTreeModule} from '@angular/material/tree';
MatTreeNode
Wrapper for the CdkTree node with Material design styles.
Selector: mat-tree-node
Exported as: matTreeNodeName | Description |
---|---|
@Input()
| Whether the component is disabled. |
@Input()
|
MatTreeNodeDef
Wrapper for the CdkTree node definition with Material design styles.
Selector: [matTreeNodeDef]
Name | Description |
---|---|
@Input('matTreeNode')
|
MatNestedTreeNode
Wrapper for the CdkTree nested node with Material design styles.
Selector: mat-nested-tree-node
Exported as: matNestedTreeNodeName | Description |
---|---|
@Input()
| Whether the component is disabled. |
@Input('matNestedTreeNode')
| |
|
MatTreeNodePadding
Wrapper for the CdkTree padding with Material design styles.
Selector: [matTreeNodePadding]
Name | Description |
---|---|
@Input('matTreeNodePaddingIndent')
| The indent for each level. Default number 40px from material design menu sub-menu spec. |
@Input('matTreeNodePadding')
| The level of depth of the tree node. The padding will be |
MatTree
Wrapper for the CdkTable with Material design styles.
Selector: mat-tree
Exported as: matTreeMatTreeNodeToggle
Wrapper for the CdkTree's toggle with Material design styles.
Selector: [matTreeNodeToggle]
Name | Description |
---|---|
@Input('matTreeNodeToggleRecursive')
|
MatTreeNodeOutlet
Outlet for nested CdkNode. Put [matTreeNodeOutlet]
on a tag to place children dataNodes inside the outlet.
Selector: [matTreeNodeOutlet]
Name | Description |
---|---|
|
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.
Name | Description |
---|---|
| |
| |
| |
|
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 | |
Parameters | |
structuredData T[] | |
Returns | |
F[] |
MatTreeFlatDataSource
extends DataSourceData 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.
Name | Description |
---|---|
|
connect | |
---|---|
Parameters | |
collectionViewer CollectionViewer | |
Returns | |
Observable<F[]> |
disconnect |
---|
MatTreeNestedDataSource
extends DataSourceData 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.
Name | Description |
---|---|
| Data for the nested tree |
connect | |
---|---|
Parameters | |
collectionViewer CollectionViewer | |
Returns | |
Observable<T[]> |
disconnect |
---|