I use drag&drop via ng2-dragula. The drag&drop functionality is applied this way:
<div class='container' [dragula]='"first-bag"'>
<div>item 1</div>
<div>item 2</div>
</div>
If I understand angular 2 properly, the way how [dragula]='"first-bag"'
is attached to my div is called Attribute Directive in Angular 2.
Now I have a variable in my component called enableDragNDrop:boolean
. How can I use this variable to attach [dragula]='"first-bag"'
to my div only when enableDragNDrop == true
?
If enableDragNDrop == false
, i want this:
<div class='container'><!-- no dragula attribute directive, no dragndrop -->
<div>item 1</div>
<div>item 2</div>
</div>
There is no way to dynamically add/remove directives by adding/removing a selector. The selector dragula
has to be static HTML for the directive to get applied. You can only use features of dragula to enable/disable it if it provides such a configuration option.
I haven't used ng2-dragula
or dragula
but I guess you can assign a dragModel
and configure it this way
<div class='container' dragula [dragulaModel]="dragulaModel">
dragulaModel = {start: function () {}};
and when you want to enable it, assign a model that doesn't disable start
enableDrag() {
this.dragulaModel = {};
}
Not tested, just skimmed a bit through the source.