Angular Material 8/9 Tree Tutorial By Example

The Angular Material Tree can be added using the mat-tree directive component. This tree structure gives the ability to expand/ collapse data lists into multi-level nodes.

In this tutorial, we will get to know how to add the Angular material Tree UI component in the project using the latest version of Angular Material 9.

Here we will start by installing Material then will go step by step to learn the implementation of Angular Tree Component.

This tutorial is compatible with previous versions of Angular as well.

Install Angular Material

Run following NPM command to install Material in Angular project. Here we are installing the latest version 9 of Material.

Update App Module

To use Tree UI component in the project we need to import  MatTreeModuleMatIconModule and MatButtonModule then add in imports array:

Adding Tree Component

Next update component template with the mat-tree component directive

and update component class with the following code


Leave a Reply

Notify of