Search code examples
htmlangulartypescript

Angular - DragDropModule not working inside templates

I would like to use DragDropModule for my angular application so I can move panels that are stored inside templates (for practical purposes as well as for recursive plotting of child elements).

The problem that I have is that cdkDrag can't find the correct cdkDropList to drop into if cdkDrag is hidden within a template and is not directly nested under the HTML element. Example:

<div
cdkDropList
[cdkDropListData]="expanded.activities"
(cdkDropListDropped)="dropActivity($event)">

    <div *ngFor="let activity of expanded.activities">
        <ng-container [ngTemplateOutlet]="orangeProgramActivity"></ng-container>
    </div>
</div>

<ng-template #orangeProgramActivity>
    <div cdkDrag>This is just a test</div>
</ng-template>

With this code example, the orangeProgramActivity can be dragged anywhere but doesn't drop into the correct dropList as cdkDrag keyword can't find any droplist within its own template.

In the second example, everything works correctly and the item gets dropped into correct dropList:

<div
cdkDropList
[cdkDropListData]="expanded.activities"
(cdkDropListDropped)="dropActivity($event)">

    <div *ngFor="let activity of expanded.activities">
        <div cdkDrag>This is just a test</div>
    </div>
</div>

I would like to achieve the same functionality as in the second example, but with the use of templates because I really need them for recursion. Unfortunately, I can't reveal the whole code as my employer wouldn't be happy with that.

All I need is some static reference for my cdkDrag that is inside a template, to point onto a correct element with dropList that is outside of the template.

These are the only solutions that I found on the internet and they don't seem to work for me: Material 7 Drag and Drop ng-template incompatibility CdkDragDrop and ngTemplateOutlet

This is my first question on Stack Overflow and I'm new to angular, so I'm sorry for any confusion in my post, and thanks for any help in advance!

Solution

  • This might not work for all use cases, but you could just write it like this:

    <div
cdkDropList
[cdkDropListData]="expanded.activities"
(cdkDropListDropped)="dropActivity($event)">

    <div *ngFor="let activity of expanded.activities" cdkDrag>
        <ng-container [ngTemplateOutlet]="orangeProgramActivity"></ng-container>
    </div>
</div>

<ng-template #orangeProgramActivity>
    <div>This is just a test</div>
</ng-template>