Exploring angular-tree-component

I recently found myself in need of implementing a tree component for a feature I was working on. I came across several packages that offered the functionality but I chose to work with angular-tree-component which I’ll be discussing in this post.

Installation and Set-up

npm install — save angular-tree-component

Import styles to your file:

@import ‘~angular-tree-component/dist/angular-tree-component.css’;

Import the module to your main module application as below:
import { NgModule } from '@angular/core';
import { TreeModule } from 'angular-tree-component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TreeModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Everything is set and we’re good to go.

Below is an overview of what I have implemented. The tree is on the left side.

We have the tree component on the left side. The highlighted bit is the currently selected node. I have truncated the node items which are long for display purposes. Upon selecting a node, its details are displayed on the right side of the application in full.

This is a simple concept that demonstrates implementation of the angular-tree-component. The data used has two level nesting: there are users who have posts and the posts have comments. Think of it as something close to the Facebook scenario.

I created a function to populate the nodes from the data which I then accessed through the tree-root component tags.

The tree root can be attached to several events. In this case I’ve used the initialized and activate events. Upon initialization, the onInitialized method is executed which in this case expands the items of the first node. The activate event is triggered whenever a node item is selected. I make use of it to broadcast the selected node to be used later in displaying the node details which appear on the right side.

Items can be added by a user though form input and the tree will be updated depending on the node level item addition. The same case applies to the updating and deletion of the node items. When a node is added, one can expand and set it active.

The component has many functionalities that can be explored. To sum it up, here’s a Github link of the code: https://github.com/DianahOnyino/angular2-tree-example