How to Create Tree View Control in Angular
Tags: angular, webdev, productivity, tutorial
Published: 2019-07-25 11:03:32

---
title: How to Create Tree View Control in Angular
published: true
description: This blog provides introduction about the Syncfusion Tree View component and step-by-step procedure to add and use in an Angular application
tags: angular, webdev, productivity, tutorial
canonical_url: https://www.syncfusion.com/blogs/post/introducing-new-angular-tree-view-component-in-essential-js-2.aspx
---
The tree view control is used to represent hierarchical data in a tree-like structure, with the option of expanding and collapsing the tree nodes. Tree view has many flexible options, including data binding, node icon support, check boxes, node templates, drag and drop, and node editing supports.

This blog provides an overview of the tree view control from Essential JS 2, and also shows you the basic usage and the features of tree view.

##Getting started
We can see how to gets started with the tree view component in the Angular platform through the following simple steps:

1.First, we can create a basic Angular application through the [angular-cli](https://cli.angular.io/). If you don’t have the CLI tool already, then you can install it globally with the following command.
```
npm install -g @angular/cli
```
* Create an Angular application using the following command
```
ng new treeview-app
```
This will create the application and download its dependencies.

* Once the application is created, you can install the packages for tree view component into your application by using the following command.
```
cd treeview-app
npm install @syncfusion/ej2-ng-navigations --save
```
Here, –save will include the navigations package in the dependencies list of package.json.

* Now, the environment-related configurations are completed. Next, you can create a component to place the tree view inside. You can use the following command to create a component in your application.
```
ng generate component home
```
After that, the following files will be created.

CREATE src/app/home/home.component.html (23 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)

Then you need to import the tree view component in <strong>app.module.ts</strong>, and include it in the declarations.
```js
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-ng-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](https://ej2.syncfusion.com/angular/documentation/appearance/theme), and here we will use the Material theme for the tree view. To add the material theme in your application, you need to import <strong>material.css</strong> in <strong>styles.css</strong>.
```
@import '../node_modules/@syncfusion/ej2-ng-navigations/styles/material.css';
```
* We have successfully completed the configurations related to tree view. Now you need to initialize your first tree view component in <strong>home.component.html</strong>.
```html
<ejs-treeview id="myTree"></ejs-treeview>
```
Then add the home component in <strong>app.component.html</strong> (or where you want to place the tree view).
```html
<div style="text-align:center">
  <h1>
    Welcome to the Angular TreeView sample!
  </h1>
</div>

<app-home></app-home>
```
* Finally, run the following command to see the output in a browser.
```
ng serve --open
```
<strong>Note:</strong> Now tree view is rendered without any nodes, since data binding is essential for this.

##Data binding
Undoubtedly, tree view is a data-bound component that will need to be bound with a data source. The data source should be in the form of any valid [hierarchical structure](https://ej2.syncfusion.com/angular/documentation/treeview/data-binding.html#hierarchical-data) such as XML, a nested array of JSON objects, or a [self-referential structure](https://ej2.syncfusion.com/angular/documentation/treeview/data-binding.html#self-referential-data).

The tree nodes will be rendered from the [dataSource](https://ej2.syncfusion.com/angular/documentation/treeview/api-fieldsSettingsModel.html#datasource) based on the [fields](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#fields) property, where the following columns are mandatory to display a tree view:

* Text – defines the display text of the tree node.
* Child – defines the child data source to render the sub-nodes (children nodes).

If the data source has different column names, then we should map those names through the fields property.

Now we can construct simple hierarchical data in <strong>home.component.ts</strong>, and map it to the tree view fields.

```js
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() {
 
  }
 
}
```
Initialize the tree view in home.component.html, and assign the fields to that.
```html
<ejs-treeview id="myTree" [fields]="treeFields"></ejs-treeview>
```
Once the data binding is done, the tree view will be rendered based on the data.
<img class=" wp-image-23346 aligncenter" src="https://blog.syncfusion.com/wp-content/uploads/2018/06/Tree-view-data-bingding-300x113.png" alt="" width="335" height="126" />
##Load on demand

The tree view component was developed to work with large amounts of data. By default, the tree view is enabled with a load-on-demand option, so the child nodes were loaded at the time of expanding the parent node only.

Hence, even with a large amount of data-bound to the tree view, it will load the first level nodes only, which results in the high performance.

##Check boxes

Tree view has a built-in option for checkboxes that allows the user to select more than one item.

The checkboxes are applicable for all the parent and child nodes, where the parent nodes only allow the tri-state. When the child nodes are partially checked at that time, the parent node becomes tri-state.

We can enable checkboxes by setting the [showCheckBox](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#showcheckbox) property.
```html
<ejs-treeview id="myTree" [fields]="treeFields" [showCheckBox]="true">
</ejs-treeview>
```
Tree view has flexible APIs to set or get the checked nodes collection at any time, which helps while making interactive applications. Here you can check the nodes through the [checkedNodes](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#checkednodes) property. So, we can check a few nodes at the initial time like the following.
```html
<ejs-treeview id="myTree" [fields]="treeFields"
    [showCheckBox]="true" [checkedNodes]="['21','22','3']">
</ejs-treeview>
```
And the tree view becomes like this image.
<img style="width: 314.5px;" src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-94.png" />
##Node icons
Tree view has the option to render nodes with icons and images without node templating by mapping the [iconCss](https://ej2.syncfusion.com/angular/documentation/treeview/api-fieldsSettingsModel.html#iconcss) and [imageUrl](https://ej2.syncfusion.com/angular/documentation/treeview/api-fieldsSettingsModel.html#imageurl) fields to the node object. The iconCss adds a CSS class through which we can add font icons and custom styling. The imageUrl field inserts an image tag with the provided image path.

First, we can provide the node type details in the tree view data source, then based on that we will define the corresponding tree node’s icons. So, in our scenario, we will differentiate the nodes by folder type or any file type and will update the details in the data source with the additional column <strong>nodeIcon</strong>.
```js
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class HomeComponent implements OnInit {
 
  public treeData: Object[] = [
        {
            nodeId: '1', nodeText: 'Documents', nodeIcon: 'folder',
            nodeChild: [
                { nodeId: '11', nodeText: 'Team management.docx', nodeIcon: 'folder' },
                { nodeId: '12', nodeText: 'Entity Framework Core.pdf', nodeIcon: 'folder' }
            ]
        },
        {
            nodeId: '2', nodeText: 'Downloads', nodeIcon: 'folder', expanded: true,
            nodeChild: [
                { nodeId: '21', nodeText: 'Sales report.ppt', nodeIcon: 'ppt' },
                { nodeId: '22', nodeText: 'Introduction to Angular.pdf', nodeIcon: 'pdf' },
                { nodeId: '23', nodeText: 'Paint.exe', nodeIcon: 'exe' },
                { nodeId: '24', nodeText: 'TypeScript sample.zip', nodeIcon: 'zip' }
            ]
        },
        {
            nodeId: '3', nodeText: 'Music', nodeIcon: 'folder',
            nodeChild: [
                { nodeId: '31', nodeText: 'Crazy tone.mp3', nodeIcon: 'audio' }
            ]
        },
        {
            nodeId: '4', nodeText: 'Videos', nodeIcon: 'folder',
            nodeChild: [
                { nodeId: '41', nodeText: 'Angular tutorials.mp4', nodeIcon: 'video' },
                { nodeId: '42', nodeText: 'Basics of Programming.mp4', nodeIcon: 'video' }
            ]
        }
  ];
 
  public treeFields: Object = { 
    dataSource: this.treeData, 
    id: 'nodeId', 
    text: 'nodeText', 
    child: 'nodeChild',
    iconCss: 'nodeIcon'
  };
 
  constructor() { }
 
  ngOnInit() {
 
  }
 
}
```
<strong>Note:</strong> here the <strong>ViewEncapsulation</strong> set as <strong>None</strong>, since encapsulation is not applicable for dynamically created elements. Otherwise we need to put our custom styles under <strong>styles.css</strong> file.

An element is created for each node with the mentioned <strong>iconCss</strong> class, so we can apply our styling for that node there. You can apply the following styles in the <strong>home.component.css</strong> file.
```js
.e-treeview {
    border: 1px solid #ccc;
    width: 400px;
}
.e-treeview .e-list-icon {
    background-repeat: no-repeat;
    background-image: url('https://ej2.syncfusion.com/angular/demos/src/images/icons/file_icons.png');
    height: 20px;
}
.e-treeview .e-list-icon.folder { background-position: -10px -552px }
.e-treeview .e-list-icon.docx { background-position: -10px -20px }
.e-treeview .e-list-icon.ppt { background-position: -10px -48px }
.e-treeview .e-list-icon.pdf { background-position: -10px -104px }
.e-treeview .e-list-icon.zip { background-position: -10px -188px }
.e-treeview .e-list-icon.audio { background-position: -10px -244px }
.e-treeview .e-list-icon.video { background-position: -10px -272px }
.e-treeview .e-list-icon.exe { background-position: -10px -412px }
```
Now the tree view appearance will be changed.
<img style="width: 314.5px;" src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-95.png" />
##Drag and drop
Another important option for tree view is node drag and drop. This allows the user to reorder the nodes through UI interaction.

We can enable the drag-and-drop option by setting the [allowDragAndDrop](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#allowdraganddrop) property.
```html
<ejs-treeview id="myTree" [fields]="treeFields" [allowDragAndDrop]="true">
</ejs-treeview>
```
This behavior can be customized to prevent dropping into any nodes. This was widely used in applications similar to file manager where the drop can’t be allowed into the file-type nodes.

This can be achieved through the [nodeDragging](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#nodedragging) and [nodeDragStop](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#nodedragstop) event.
```html
<ejs-treeview id="myTree" [fields]="treeFields" [allowDragAndDrop]="true"
    (nodeDragging)="onNodeDragging($event)" (nodeDragStop)="onNodeDragStop($event)">
</ejs-treeview>
```
Apply the conditions in the corresponding event handler.
```js
public onNodeDragging (e) {
    if(e.droppedNode && e.droppedNode.querySelector('.folder') == null) {
        // to show the node drop not allowed icon
        var dragItemIcon = document.querySelector(".e-treeview.e-drag-item .e-icon-expandable");
        dragItemIcon.classList.add('e-no-drop');
    }
}
 
public onNodeDragStop (e) {
    if(e.droppedNode.querySelector('.folder') == null) {
        // to prevent the node drop action
        e.cancel = true;
    }
}
```
Now you can see the tree view with drag and drop enabled, where you are not allowed to drop any files or folders under the file node.
<img style="width: 314.5px;" src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-15.gif" />
##Node editing
Node editing is also an often-used feature that allows the user to rename the tree node dynamically through UI interaction. This is also a common and useful option in applications similar to file manager.

We can enable the node editing option by setting the [allowEditing](https://ej2.syncfusion.com/angular/documentation/treeview/api-treeViewComponent.html#allowediting) property.
```html
<ejs-treeview id="myTree" [fields]="treeFields" [allowEditing]="true">
</ejs-treeview>
```
Now you can edit the tree nodes by double-clicking on them, or by pressing F2 key from the keyboard.
<img style="width: 314.5px;" src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-16.gif" />
##Template
The tree nodes can be templated using the built-in template support. This is a great option to give the tree view a great look and feel.

Depending on the application scenario, we can customize the tree nodes with images, multiple elements, and so on. Here, we can form a template for our file manager scenario to represent the child item count in the parent element.

First, we will update the data for the root elements to show the child count.
```js
public treeData: Object[] = [
    {
        nodeId: '03', nodeText: 'Documents', nodeIcon: 'folder', childCount: 2,
        ...
    },
    {
        nodeId: '05', nodeText: 'Downloads', nodeIcon: 'folder', expanded: true, childCount: 4,
        ...
    },
    {
        nodeId: '01', nodeText: 'Music', nodeIcon: 'folder', childCount: 1,
        ...
    },
    {
        nodeId: '02', nodeText: 'Videos', nodeIcon: 'folder', childCount: 2,
        ...
    }
];
```
Then we can form the tree node element structure based on the <strong>childCount</strong> attribute.
```html
<ejs-treeview id="myTree" [fields]="treeFields">
   <ng-template #nodeTemplate let-data>
        <div>
            {{data.nodeText}}
            <span *ngIf="data.childCount" class="files-count">
                ({{data.childCount}} files)
            </span>
        </div>
    </ng-template>
</ejs-treeview>
```
Now add your custom styles for your template in <strong>home.component.css</strong>.
```js
.files-count {
    font-size: 9px;
    color: red;
}
```
Finally, the tree view becomes like the following image.
<img style="width: 314.5px;" src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-96.png" />
##Summary
Overall, the tree view component was designed to be completely customizable, as well as have flexible usage from the application point of view.

If you would like to try the tree view component, you can download our [free trial](https://www.syncfusion.com/downloads/essential-js2). You can visit the tree view [source in GitHub](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/navigations) and you can check our [sample browser](https://ej2.syncfusion.com/angular/demos/#/material/treeview/default) and [documentation](https://ej2.syncfusion.com/angular/documentation/treeview/) for detailed explanation and the understanding to proceed further.

If you have any questions or need any clarifications, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums) or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/). We are always happy to assist you!

If you like this blog post, we think you’ll also like the following free e-books:

[JavaScript Succinctly](https://www.syncfusion.com/ebooks/javascript)
[TypeScript Succinctly](https://www.syncfusion.com/ebooks/typescript)
[AngularJS Succinctly](https://www.syncfusion.com/ebooks/angularjs)
[Angular 2 Succinctly](https://www.syncfusion.com/ebooks/angular2_succinctly)





The post [How to Create Tree View Control in Angular](https://www.syncfusion.com/blogs/post/introducing-new-angular-tree-view-component-in-essential-js-2.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).