We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started with Syncfusion Angular 5 TreeView component?

Platform: JavaScript - EJ 2 |
Control: TreeView |
Published Date: November 26, 2018 |
Last Revised Date: November 6, 2019

The Angular 5 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 easily with Syncfusion Angular 5 TreeView component.

 

Treeview

 

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 5+
  2. Typescript 2.6+

 

Angular 5 TreeView Introduction

 

The Angular 5 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 5 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@1.7.0

 

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

 

  1. Now, the environment-related configurations have been completed. Next, integrate your Angular 5 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.

 

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

 

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

 

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

 

Then bind the data in home.component typescript file.

 

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

 

Treeview

 

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.

 

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

 

Treeview CheckBox

 

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="myTree" [fields]="treeFields" [allowEditing]=”true”></ejs-treeview >

 

Treeview NodeEdit

 

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="myTree" [fields]="treeFields" [allowDragAndDrop]=”true”></ejs-treeview >

 

Treeview DragAndDrop

 

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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon