Create angular tree component using angular material api

Follow the below steps to build user tree component:-

ng add @angular/cli

ng new fms

ng add @angular/material

ng add @angular/cdk

ng generate @angular/material:tree tree

tree.component.html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">

<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>

<button mat-icon-button disabled></button>

<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">

{{ node.type === 'file' ? 'description' : 'folder' }}

</mat-icon>

{{node.name}}

</mat-tree-node>




<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>

<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">

{{ node.type ==='file' ? 'description' : 'folder' }}

</mat-icon>

{{node.name}}

</mat-tree-node>

</mat-tree>

tree.component.ts

import { Component } from '@angular/core';

import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';

import { of as observableOf } from 'rxjs';

import { FlatTreeControl } from '@angular/cdk/tree';

import { files } from './example-data';




/** File node data with possible child nodes. */

export interface FileNode {

name: string;

type: string;

children?: FileNode[];

}




/**

* Flattened tree node that has been created from a FileNode through the flattener. Flattened

* nodes include level index and whether they can be expanded or not.

*/

export interface FlatTreeNode {

name: string;

type: string;

level: number;

expandable: boolean;

}




@Component({

selector: 'app-tree',

templateUrl: './tree.component.html',

styleUrls: ['./tree.component.css']

})

export class TreeComponent {




/** The TreeControl controls the expand/collapse state of tree nodes. */

treeControl: FlatTreeControl<FlatTreeNode>;




/** The TreeFlattener is used to generate the flat list of items from hierarchical data. */

treeFlattener: MatTreeFlattener<FileNode, FlatTreeNode>;




/** The MatTreeFlatDataSource connects the control and flattener to provide data. */

dataSource: MatTreeFlatDataSource<FileNode, FlatTreeNode>;




constructor() {

this.treeFlattener = new MatTreeFlattener(

this.transformer,

this.getLevel,

this.isExpandable,

this.getChildren);




this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);

this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

this.dataSource.data = files;

}




/** Transform the data to something the tree can read. */

transformer(node: FileNode, level: number) {

return {

name: node.name,

type: node.type,

level: level,

expandable: !!node.children

};

}




/** Get the level of the node */

getLevel(node: FlatTreeNode) {

return node.level;

}




/** Get whether the node is expanded or not. */

isExpandable(node: FlatTreeNode) {

return node.expandable;

}




/** Get whether the node has children or not. */

hasChild(index: number, node: FlatTreeNode) {

return node.expandable;

}




/** Get the children for the node. */

getChildren(node: FileNode) {

return observableOf(node.children);

}

}

tree.component.css

.type-icon {

color: #757575;

margin-right: 5px;

}

tree.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MatButtonModule, MatIconModule, MatTreeModule } from '@angular/material';

import { TreeComponent } from './tree.component';

describe('TreeComponent', () => {

let component: TreeComponent;

let fixture: ComponentFixture<TreeComponent>;

beforeEach(async(() => {

TestBed.configureTestingModule({

declarations: [ TreeComponent ],

imports: [

MatButtonModule,

MatIconModule,

MatTreeModule,

]

}).compileComponents();

}));

beforeEach(() => {

fixture = TestBed.createComponent(TreeComponent);

component = fixture.componentInstance;

fixture.detectChanges();

});

it('should compile', () => {

expect(component).toBeTruthy();

});

});