angular cdk dnd with angular tree component package

I am trying to use angular cdk dnd with angular tree component package. currently i am using ng2-dnd. ng2-dnd code

<div class="tree">
<tree-root
#tree
id="tree2"
[focused]="true"
[nodes]="nodes"
[options]="options"
>
<ng-template
#treeNodeFullTemplate
let-node
let-index="index"
let-templates="templates"
>
<div
dnd-sortable-container
[sortableData]="dropDataInComponent"
[dropZones]="['level-2-' + index]"
>
<div
dnd-sortable
[sortableIndex]="index"
(dragstart)="onDragStart(node.data)"
[dragEnabled]="node.data.level == 2"
(dragend)="onDragEnd(nodes)"
style="display: flex; gap: 4px; padding: 6px" class="mg-15"">
<tree-node-expander
class="tree-node-expander-arrow"
[node]="node"
></tree-node-expander>
</div>
<tree-node-children
[node]="node"
[templates]="templates"
></tree-node-children>
</div>
</ng-template>
</tree-root>
</div>


its bugging out someout its not dragging what might be the problem? can anyone help me with replacing ng2-dnd witn cdk dnd

<div class="tree">
<tree-root
#tree
id="tree2"
[focused]="true"
[nodes]="nodes"
[options]="options"
>
<ng-template
#treeNodeFullTemplate
let-node
let-index="index"
let-templates="templates"
>
<div
cdkDropList
[cdkDropListData]="node"
(cdkDropListDropped)="drop($event, node)"
>
<div
cdkDrag
[cdkDragData]="node.substructures"
style="display: flex; gap: 4px; padding: 6px" class="mg-15">
<tree-node-expander
class="tree-node-expander-arrow"
[node]="node"
></tree-node-expander>
</div>
<tree-node-children
[node]="node"
[templates]="templates"
></tree-node-children>
</div>
</ng-template>
</tree-root>
</div>


this was my replacement but not working also putting the data that was there in ng2-dnd is also not working

Continue reading...