Last update on Wednesday, July 20th 2016

ng2-drag-drop-tree: Adding a new node and demo available!

One very important feature wasn't listed yet, the possibility to add some nodes!

Let's do this!

First we will add a very beautiful icon in the tree-node.html:

  <span (click)='addNewNode(child)'>+</span>

In tree-node.component we create the function addNewNode. Very simple, using the spread operator we recreate the subNodes of the node that we passed and push at the end a new node that is created using the TreeManager Service:

addNewNode(node) {
  node.subNodes = [...node.subNodes, this.treeManager.getNewNode()];

For now in the TreeManager Service, we return a simple node.

  return {text:'new node', subNodes:[],expanded:false};

And the work is done!

I appreciate your feedback, one of them was about creating a demo. The project is still in an early stage and didn't think you would need it yet!

So you can git clone the demo from here!

I encountered an irregularity in the Primeng when I tried to do a stopPropagation (for dropping an arborescence of nodes) and opened an issue on their website. Since there are lot of issues there, it will take some time. I will certainly fork it for the need of the project.

Stay tuned for the next episodes!

Let's start an open source Angular 2 project: ng2-drag-drop-tree

ng2-drag-drop-tree: Search And Node Deletion Features

ng2-drag-drop-tree: Text Modification And OSS Inception

Stay up to date

Join over 4000 other developers who already receive my tutorials and their source code out of the oven + other free stuff!