Add dragula Attribut on buttonclick

Question

I'm at the moment working with Angular (4.0) and ng2-dragula. I've mad a div to a dragula container to move the items in it like this:

<div id="dragcontainer" [dragula]='"first-bag"'>

Now I'd like to implement the function to make my div to a dragable dragula div on button click. For example:

Before button click:

<div id="dragcontainer">

After button click:

<div id="dragcontainer" [dragula]='"first-bag"'>

I've tried this:

HTML-Button:

<button md-raised-button style="margin-left: 20px;" (click)="dragable()">
    Make it drawable
</button>

TypeScipt Code:

dragable(): void {
    document.getElementById("dragcontainer").setAttribute("[dragula]", "first-bag");
}

but that's not working. To ensure that I've used the .setAttribute command correctly I've tried this:

dragable(): void {
    document.getElementById("dragcontainer").setAttribute("align", "center");
}

and that was working.

Has anybody tried this before or does anybody know how to solve this?

Answer 1

Perhaps you need some boolean flag in the controller that is triggered after button click, you should listen on drakeService.on('drag', listener) and if flag is set to false (initially) then you immediately trigger .cancel(true) method.

Would be much easier I think if you could provide some online demo (plunkr for example).