How to get started with Syncfusion Angular 6 TreeView component?

The Angular 6 TreeView component allows you to represent hierarchical data in a tree structure. It has great performance combined with advanced features like load on demand, checkbox support, multiple selection, tree navigation, drag and drop, tree node editing, and template support.

This section explains how to get with Syncfusion Angular 6 TreeView component.

Project pre-requisites

Make sure that you have the following compatible version of TypeScript and Angular in your machine before starting to work on this project.

1. Angular 6+
2. Typescript 2.9+

Angular 6 TreeView Introduction

The Angular 6 TreeView used in this project is created from the Syncfusion `ej2-angular-navigations` package. You can simply define it as <ejs-treeview> within the template.

Getting Started

You can get started with the treeview component in Angular 6 platform using the following simple steps.

1. Create a basic Angular application using angular-cli. If you do not have the CLI tool already, install it globally using the following command.

   npm install @angular/cli@6.1.0
   

2. Create an Angular application using the following command.

   ng new treeview-app
   

This command will create the application and download its dependencies.

1. After the application has been created, install the packages for treeview component into your application using the following command.

   cd treeview-app
   npm install @syncfusion/ej2-angular-navigations --save
   

2. Now, the environment-related configurations have been completed. Next, integrate your Angular 6 TreeView component into the application.

To import the treeview component in the app.module.ts, include it in the declarations.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
 
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TreeViewComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
 

Essential JS 2 components support a set of built-in-themes, and here the material theme for the treeview is used. To add the material theme in your application, import the material.css files in style.css.

style.css

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'
 

To initialize the treeview component in home/home.component.html file, use the following codes.

home.component.html

  <ejs-treeview id="myTree" [fields]="treeFields" ></ejs-treeview>
 

Then bind the data in home/home.component.ts file.

home.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public treeData: Object[] = [
        {
            nodeId: '1', nodeText: 'Documents',
            nodeChild: [
                { nodeId: '11', nodeText: 'Team management.docx' },
                { nodeId: '12', nodeText: 'Entity Framework Core.pdf' },
            ]
        },
        {
            nodeId: '2', nodeText: 'Downloads',
            nodeChild: [
                { nodeId: '21', nodeText: 'Sales report.ppt' },
                { nodeId: '22', nodeText: 'Introduction to Angular.pdf' },
                { nodeId: '23', nodeText: 'Paint.exe' },
                { nodeId: '24', nodeText: 'TypeScript sample.zip' },
            ]
        },
        {
            nodeId: '3', nodeText: 'Music',
            nodeChild: [
                { nodeId: '31', nodeText: 'Crazy tone.mp3' }
            ]
        },
        {
            nodeId: '4', nodeText: 'Videos',
            nodeChild: [
                { nodeId: '41', nodeText: 'Angular tutorials.mp4' },
                { nodeId: '42', nodeText: 'Basics of Programming.mp4' },
            ]
        }
  ];
  public treeFields: Object = { 
    dataSource: this.treeData, 
    id: 'nodeId', 
    text: 'nodeText', 
    child: 'nodeChild'
  };
  constructor() { }
  ngOnInit() {
  }
}
 

After the data binding has been done, you can use the following command to see the output in a browser.

ng serve --open

Check boxes

TreeView has a built-in option for check boxes that allows users to select more than one item.

You can enable check boxes by setting the showCheckBox property in home.component.html file.

<ejs-treeview id="default" showCheckBox='true' [fields]='treeFields'></ejs-treeview>

Node Editing

The node editing is also an often-used feature that allows users to rename the tree nodes dynamically through UI interaction.

You can enable the node editing option by setting the allowEditing property.

<ejs-treeview id="default" [fields]='treeFields' allowEditing="true"></ejs-treeview>

Drag and drop

Another important feature for treeview is node drag and drop. This allows users to reorder the nodes through UI interaction.

You can enable the drag-and-drop option by setting the allowDragAndDrop property.

<ejs-treeview id="default" [fields]='treeFields' allowDragAndDrop="true"></ejs-treeview>
 

Also, you can download and run the sample from this GitHub Repository. For more information about TreeView functionalities, refer below help documents and samples.

UG Documentation: https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/

Samples: https://ej2.syncfusion.com/angular/demos/#/material/treeview/default