Tree for Angular

In this blog we will introduce our Angular Tree UI component.

The Tree component is very popular and is ubiquitous in file explorers to show files and directory structure. It is used to represent hierarchical information which starts from the root item or node and proceed to its children and their respective children. Each node besides the root has a parent and can have children. The parent is the node which is higher in the hierarchy and the child the one that is lower. Siblings are items which have one and the same parent. Items can be expanded and collapsed.

Angular Tree Highlights

Our Tree component for Angular has a lot of features one of the most important of which is the capability to show an image on the left side of the item.



Another advanced feature is the ability to show checkboxes next to the items. Three state checkboxes can also be enabled. In this mode when the user clicks an item its children or sub items also become checked. If there is an unchecked node the parent item is in indeterminate state.

With our Angular Tree it is also possible to have a context menu when you click on the item. This is useful if the tree is dynamic to insert and delete nodes.

One very interesting advanced feature is that the Tree can be displayed in a popup. In this way a drop down tree can be created. This is useful for example to create an advanced list box with a hierarchical structure.

Our Tree component for angular supports also keyboard navigation, drag and drop, and right-to-left layout. It can also be built or loaded from JSON data or from XML data. Software developers can populate it from UL or from Array data, too.

Angular Tree Demos
Angular Tree Documentation