0

I want to add cdkDrag conditionally. I tried the following ways but none of them does not work.

public canDragAndDrop:boolean=true ; // false

<div [attr.cdkDrag]="canDragAndDrop ? '':null"></div>
// or
<div [attr.cdkDrag]="canDragAndDrop ? 'cdkdrag':null"></div>
// or  
<div cdkDrag="{{canDragAndDrop ? '':null}}"></div>

How can I do that?

AR Second
  • 582
  • 1
  • 6
  • 25
  • Does this answer your question? [Apply a directive conditionally](https://stackoverflow.com/questions/44597077/apply-a-directive-conditionally) – Eldar Jul 13 '23 at 08:07
  • I tried all of them but does not work for `cdkDrag` – AR Second Jul 13 '23 at 08:12
  • 2
    The link provided are all the answer wrong. a directive is **not** an attribute. A directive change the tag and make a "super tag". I suggest use cdkDragDisabled: `[cdkDragDisabled]="!canDragAndDrop "` or use two divs, one with the cdkDrag and another one without cdkDrag and use a *ngIf to show only one div at time. – Eliseo Jul 13 '23 at 08:17
  • @Eliseo- thanks, sir, you saved my day. I really appreciate it. – AR Second Jul 13 '23 at 20:51

0 Answers0