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.

getNewNode(){
  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!