Learn MVC Using Angular Bootstrap Nav Tree


This article demonstrates working with MVC using Angular Bootstrap Nav Tree.

Angular Bootstrap Nav Tree

The style is completely bootstrapped because the tree is actually just a “nav” list, with a few changes.

  • Added
  • Expand/Collapse
  • Angular animations are used during expand/collapse.

The abn-tree directives now work with Bootstrap 2 and Bootstrap 3. You can change the icons used by specifying them in HTML attributes.

Follow the steps below to use Angular Bootstrap Nav Tree in Angular JS in MVC.

  • Create MVC Project.
  • Configure Angular Bootstrap Nav Tree.
  • Work in Angular Bootstrap Nav Tree.

Create MVC Project

Open Visual Studio 2017.

Go to New > New > Project. Now, it will open New Project window.


Select ASP.NET Web Application on Framework 4.5. Enter the name of the project in the “Solution name” textbox and click OK.


One more window should appear. Select MVC Template in this popup and click OK. Now, we can start the play.

Configure Angular Bootstrap Nav Tree

You can download the plug-in from:

Open the _Layout.cshtml and refer to the .js files from your downloaded folder to view this page.

Link your Angular configurable file.

Angular Module

You need to include the module as a dependency in your application.

Work in Angular Bootstrap Nav Tree

This tree control will work when you use the <abn-tree > directive as an HTML attribute.



Angular Controller

Click F5 button to Run the application. Now, it will open the browser where you can see the result. It will load geographic data and on-select change shows the selected result at the top of the page.

Output 1


Angular Controller


You can load the data dynamically in Nav Tree. When you click on ‘toggle tree data,’ it shows the description of the label.

Output 2


Angular Controller

You can add the new branch on that tree in any of the nodes.

Output 3



Other events are already predefined.


In this article, we have learned how to create an MVC application using Angular Bootstrap Nav Tree. If you have any queries, please tell me via the comments section. Your comments are very valuable.

Happy Coding!

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.