Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Could not find a tree control for the tree

I am facing an error for sample code I am using angular 6 and angular material for application design:

<mat-tree>
    <mat-tree-node> parent node </mat-tree-node>
</mat-tree>

Error Message:

Error: Could not find a tree control for the tree

any help much appreciated.

like image 365
Prasad Shinde Avatar asked May 24 '18 07:05

Prasad Shinde


People also ask

What is CDK tree?

The <cdk-tree> enables developers to build a customized tree experience for structured data. The <cdk-tree> provides a foundation to build other features such as filtering on top of tree. For a Material Design styled tree, see <mat-tree> which builds on top of the <cdk-tree> .

What is Mat tree?

The mat-tree provides a Material Design styled tree that can be used to display hierarchy data. This tree builds on the foundation of the CDK tree and uses a similar interface for its data source input and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk- .

What is flat tree?

Flat tree : In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence. Nested tree : In Nested tree, children nodes are placed inside their parent node in DOM. The parent node has an outlet to keep all the children nodes.


2 Answers

The documentation on Material Angular is not super clear about it... You need tho specifie a [treeControl]="nestedTreeControl" of the type NestedTreeControl<FileNode>;

If you go to Material Angular Tree Component and check the code you will understand easily.

like image 100
The224 Avatar answered Sep 22 '22 12:09

The224


In case you really want to work with a flat tree then this error also appears when you accidentally use <mat-nested-tree-node> instead of <mat-tree-node>.

like image 26
Tai Truong Avatar answered Sep 22 '22 12:09

Tai Truong