Let’s drag and drop with ng2-dragula in an Angular4 project

Sponsored by letsboot.com

Check out our Angular in-house trainings or a public Angular courses.
Try out fossilo.com, our angular project to archive complete websites.

What we will do today:

• install ng2-dragula component using npm in an Angular4 project
• import it to the app module and implement it into the app component
• display a list of tasks and play with them

Install ng2-dragula in your Angular4 application

Go inside your project and run the following command with npm:

npm install ng2-dragula --save

Import and implementation of the ng2-dragula component

In your app module, import the ng2-dragula module and add it in the imports of the NgModule as follows:

Then in your app component, set the options of the ng2-dragula component if you need them.

Two ways to do it:

1. Set up an options property as any and set it with the ng2-dragula option you want such as removeOnSpill, revertOnSpill, copy… :

2. Import the dragulaService and inject it into the constructor of the app component. Then into the constructor, call the service in order to get the setOptions method. You need to set the name and the options of your drag-and-drop:

You can find all the options in the official documentation of dragula.

Display

In your html template, you also have 2 ways to display your drag-and-drop list:

1. Either create 2 lists embedded in 2 different containers. Add the directive [dragula], this allows you to group containers together and is called “bag”. Also set your options by binding to the [dragulaOptions] attribute.

2. Or in the containers div, add the option [dragula] (but not the [dragulaOptions]) and set the name of your chosen option (defined in the app component):

The CSS for the classes used here can be found in the example.css file of the dragula package Github repository. You can also overwrite the CSS to customize your drag-and-drop as you wish!

Take a look to your super dragged-and-dropped list by running your local server (make sure you are in your project repository):

ng serve -o

You can now drag and drop whatever you want, you can even remove and copy some elements!

Thank you to @valorkin and @walkerrunpdx for this fun npm component!

See you next time for another article about Angular4 ! Follow me on Twitter, LinkedIn or Medium and take a look at our letsboot.com medium article series!