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.
|
1 2 3 4 5 |
$ ng add @angular/material ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink ? Set up global Angular Material typography styles? Yes ? Set up browser animations for Angular Material? Yes |
Update App Module
To use Tree UI component in the project we need to import MatTreeModule, MatIconModule and MatButtonModule then add in imports array:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatTreeModule } from '@angular/material/tree'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ AppComponent, MaterialTreeDemoComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatTreeModule, MatIconModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Adding Tree Component
Next update component template with the mat-tree component directive
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <!-- This is the tree node template for leaf nodes --> <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> <!-- use a disabled button to provide padding for tree leaf --> <button mat-icon-button disabled></button> {{node.name}} </mat-tree-node> <!-- This is the tree node template for expandable nodes --> <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> <mat-icon class="mat-icon-rtl-mirror"> {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} </mat-icon> </button> {{node.name}} </mat-tree-node> </mat-tree> |
and update component class with the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import { Component, OnInit } from '@angular/core'; import { FlatTreeControl } from '@angular/cdk/tree'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; interface FoodNode { name: string; children?: FoodNode[]; } interface ExampleFlatNode { expandable: boolean; name: string; level: number; } const TREE_DATA: FoodNode[] = [ { name: 'Fruit', children: [ { name: 'Apple' }, { name: 'Banana' }, { name: 'Fruit loops' }, ] }, { name: 'Vegetables', children: [ { name: 'Green', children: [ { name: 'Broccoli' }, { name: 'Brussels sprouts' }, ] }, { name: 'Orange', children: [ { name: 'Pumpkins' }, { name: 'Carrots' }, ] }, ] }, ]; @Component({ selector: 'app-material-tree-demo', templateUrl: './material-tree-demo.component.html', styleUrls: ['./material-tree-demo.component.scss'] }) export class MaterialTreeDemoComponent implements OnInit { private _transformer = (node: FoodNode, level: number) => { return { expandable: !!node.children && node.children.length > 0, name: node.name, level: level, }; } treeControl = new FlatTreeControl<ExampleFlatNode>( node => node.level, node => node.expandable); treeFlattener = new MatTreeFlattener( this._transformer, node => node.level, node => node.expandable, node => node.children); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); constructor() { this.dataSource.data = TREE_DATA; } hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit(): void { } } |
Leave a Reply