Last update on Saturday, January 12th 2019

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

Open source can
be easy and exci...

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

In this tuts we
improve our ope...

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

In this tuts we
improve our ope...

Stay up to date

Join over 4000 other developers who already receive my tutorials and their source code out of the oven with other free JavaScript courses and an Angular cheatsheet!
Designed by Jaqsdesign