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

There are 2 things that I really enjoy, salsa lessons in Bogota and open source projects. Unfortunately, I haven’t had a lot of time for the later one :s.

I had a look at the Angular 2 libraries that are missing and … there are quite a lot of them to transpose from Angular 1. So let’s create a “new” one : ng2-drag-drop-tree.

The end result will look like:

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example

Since I’ve already done it in the past with Angular 1 #goodolddays, I pretty much know what are the minimum functionalities and it would be cool to post the progression here in order to show to everyone that helping the Open Source Community is not only for people named Linus Torvald.

In this first post we will see how to create tree nodes and use PrimeNG‘s drag/drop to manipulate them.

Why PrimeNG?

Simply because it’s simple and they have a good documentation. Compared to what I used in the past, some features are not built-in but we will deal with it.

If you think that your Angular2/TypeScript knowledge is not solid yet, go Here to start learning first.

The Base Html

Something very basic, a directive “tree-node” with children that consist of:

  • Some text
  • Some subNodes for the recursivity
  • A boolean variable “expanded” to see if the node’s subNodes need to be displayed

 

One Service To Rule Them All

Let’s create a service that will help us handle the actions on those nodes, for now something very simple, we just need to know which node has been selected:

The whole TreeNode component is here, we inject the drag-drop libs, our TreeManager, and create some Angular 2 features.

Let’s break it down.

We init our component TreeNode:

  • ‘tree-node’ selector for the template
  • We pass the Draggable, Droppable directives from PrimeNG AND the TreeNode itself so that we can use it recursively in the template
  • And finally the component’s template

We declare children as an Input and treeManager that we instantiate right after in the constructor:

When we start dragging, we set the current node:

When we stop dragging, we delete the node from the children without verification for now:

When a drop is triggered, instead of doing a push in the subNodes,  we recreate the subNode using the spread operator so that we don’t have troubles in the future with filtering (thanks EggHead):

Finally the toggle method which is the most difficult one, we pass a child and we toggle the value of expanded (it took 5 developers  and 2 days to do this one).

A KickAss Template

Basically the Node template is a list, just like pretty much every applications on the web.

We loop on every children of a node, display the text and if the node is expanded, we display a new node recursively, this new node will get populated using the subNodes that are pushed.

recursive

If we click on the node’s text, we toggle expanded.

When we start/end dragging an element of the list we pass $event and child.

When we drop a node on the text, we use the previously described method ‘onDrop’ with the child and $event.

As you can see the CSS is pretty basic, no need to complicate things … for now.

Conclusion

A good start, trying to make it simple and flexible for the incoming features which will consist of changing the text of the nodes, add a delete feature, filtering, handling different type of drag/drop actions and handling actions on multiple nodes.

 

The project has been pushed here :

https://github.com/matthieu-D/ng2-drag-drop-tree

Would love some ideas on integration with SystemJS and WebPack since it’s my first Angular 2 plugin ;).

4 Comments

  1. June 10, 2016    

    I’ll right away seize your rss as I can not to find your e-mail subscription link or newsletter service.
    Do you have any? Please permit me understand in order that I may subscribe.

    Thanks.

    • Matthieu Drula Matthieu Drula
      June 13, 2016    

      Thanks for the feedback, I was a quite busy between airport lately, the email subscription should popup normally, I will have a look at it.

  2. Jim Jim
    July 6, 2016    

    How about a working demo with source code for this? Seems to be exactly what some are looking for…
    (http://forum.primefaces.org/viewtopic.php?f=35&t=45827&p=144134#p144134)

    • Matthieu Drula Matthieu Drula
      July 9, 2016    

      That’s a great idea, I have been playing with it in a sandbox and I didn’t took the time to put it a realclean project out there.
      Keep in mind that it’s still a work in progress, sure it’s better than nothing but it’s not production ready yet.

Leave a Reply

4 Shares