How to add Treeview in Angular 6 and Asp.Net Core Application

In this tutorial, we are going to learn how to add treeview in Angular 6 and ASP.NET Core Application using Web API. There are lots of libraries or plugins that provide us facility to implement treeview in angular 6 like Angular Material, ngx-treeview, and jsTree.

But now we will implement treeview using jsTree in Angular 6 and Asp.Net Core Application. jsTree is a Jquery plugin that provides free interactive trees. There are lots of functions that you can do with jsTree like ”drag & drop”, ”Keyboard navigation”, “inline edit, create and delete”, “tri-state checkboxes”, “fuzzy searching”, “customizable node types” and etc.

Treeview in angular 6 using Asp.Net Core web API.

Let’s start to implement treeview in angular 6 and Asp.Net Core Application using web api.

Step # 1: Install jsTree

First-of-all, we will install jsTree in Angular 6 and Asp.Net Core Application. So, go to project terminal and then write this below command to install jsTree.

npm install –save-dev @types/jquery @types/jstree

Now, go to project folder structure and then go to Angular.json file and then add this below line into styles.

“node_modules/jstree/dist/themes/default-dark/style.min.css”

Now, copy these below lines and then paste into scripts.

“../node_modules/jquery/dist/jquery.min.js”, “../node_modules/jstree/dist/jstree.min.js”

Step # 2: Add typescript code

Now, in this step we will add some typescript code for treeview. So, go to component folder where you want to add treeview and then open .ts file and then write the code as you see in below file.

Let’s understand this above code.

Line # 2: Here in this line we are importing services.

Line # 5: In this line we are importing jsTree.

Line # 17 & 18: Here in these lines we are declaring objects of two classes. One is for parent nodes and the other one is for child node.

• TreeDatas: This class is for parent node and declared in Line # 71.
• TreeDatasChild: This class is for child nodes and declared in Line # 78.

Line # 26: Here in this line we are getting all the data from database using Asp.Net Core web API.

Line # 28 to 41: In these lines, we are pushing all the data through loop into data object.

Line # 42: Here in this line, we are initializing javascript code for passing data to jstree.

Line # 55: Here in this line we are adding some plugins for treeview like sorting nodes, checkboxes, drag and drop and etc.

Step # 3: Add front-end code

Now, in this step we will write some front-end code for showing treeview. So, write this below code with the component html file.

Now, finally run your project and then you will see the output as you see in below.

Thank you for reading. Keep visiting and sharing!