Angular’s dominance in the reactive app enterprise market continues to grow with over 280,182 sites using the platform.
A common query developers ask is how to make an interactive navigation system? One that mirrors the functionality of Windows Explorer to provide a branched-tree structure.
This article provides the answer in the form of the Angular Material Tree component.
Find out what the Mat-Tree directive does and how it works. Learn how to implement drag and drop functionality. Discover the difference between nested tree and flat tree nodes.
Read on to improve your Angular skills and add them to your own projects.
Angular Material Tree Component
Angular Material is a user interface (UI) component library. It’s inspired by Google Material Design guidelines.
It provides a consistent way for users to interact with your projects and works on all modern browsers. It’s also relatively straightforward to set up so you can start coding within minutes.
The Angular Material Tree component displays hierarchical data. For example:
- Navigation link #1
- Sub link a
- Sub link b
- Navigation link #2
This is a ubiquitous way to present a navigation structure and the Material design aspect styles the control to match your template.
Mat-Tree Directive
The Mat-Tree directive is the new version of the CDK tree control and works in a similar way but uses a mat-tree prefix. An example is given below:
<mat-tree>
<mat-tree-node>Parent node here</mat-tree-node>
<mat-tree-node> — Child node here </mat-tree-node>
</mat-tree>
You can view an excellent tutorial on how to implement an Angular tree control component here.
There are two ways to present hierarchical data within the component: as a flat tree or as a nested tree. Both have separate DOM structures.
Flat Tree Structure
A Flat Tree structure places all nodes as a flat list i.e. nodes rendered in a sequence as siblings.
The TreeFlattener instance will generate the flat list from your hierarchical data. From there, you access tree nodes through the .getLevel() method of the TreeControl. You can style each child node as you wish depending on the appropriate level.
Use a flat tree structure for infinite scrolling or where the hierarchy can change when loaded.
Nested Tree Structure
A Nested Tree placed child nodes within their parents as in a traditional DOM layout.
They’re easier to visualize because of the parent/child relationship. And they require less coding to display those relationships.
That’s great news if you have a static navigation structure you want to implement.
TreeControl Features
The TreeControl takes charge of expanding and collapsing the state of tree nodes.
Nested trees also require the NestedTreeControl to run. The FlatTreeControl works with TreeControl to make a flat structure work recursively.
One point to note is that the <mat-tree> directive only renders the tree structure.
You can add additional features on top of each of the tree nodes to style them as you wish. The data source should always remain separate and must adjust the structure if changed.
More Angular Material Tree Component Tips
The Angular Material Tree component makes creating a hierarchal navigation system a breeze.
With the option to create a nested tree or flat tree structure, you’re spoiled for choice. Add in the ability to drag and drop and you can build any list that you need.
Read more of our posts to get the most out of Angular including Angular Material.
