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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started with Syncfusion Angular 4 TreeView component?

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

The Angular 4 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 4 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 4+
  2. Typescript 2.6+


Angular 4 TreeView Introduction


The Angular 4 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 4 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.



  1. Create an Angular application using the following command.



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.


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

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



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.



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



Then bind the data in home.component typescript file.



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




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.




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.




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.





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

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

Live Chat Icon For mobile