Angular 2: how to conditionally apply attribute directive?

Question

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>

Answer 1

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.