title: Angular drag and drop not working when dropping elements in n-ary tree represented using recursive template
body: <p>I'm new to angular material drag and drop.</p>
  
  <p>My app is using an n-ary tree, and since I don't know its form apriori, I've been forced to use a recursive template in order to represent it. </p>
  
  <p>The last couple of days I've been trying to use Angular material drag and drop to reorder siblings. If I remove the root node everything works just fine, but I cannot remove the root node since I need it to traverse the tree for other operations.</p>
  
  <p>Bellow is a simplified form of the tree. In reality, the tree can have many more branches and leaves, but I wanted to keep it simple.</p>
  
  <p>Json of the n-ary tree (root node with the 3 children nodes I want to be able to drag and drop):</p>
  
  <pre><code>[
    {
      "orderIndex": 0,
      "id": "5a4f87ce-c52d-4cc1-b587-21898ded5cc0",
      "parentId": "5a4f87ce-c52d-4cc1-b587-21898ded5cc0",
      "name": "Interface1",
      "conditions": "None",
      "text": null,
      "description": "description",
      "children": [
        {
          "orderIndex": 0,
          "id": "5a4f87ce-c527-4cc1-b587-22898ded5cc0",
          "parentId": "5a4f87ce-c52d-4cc1-b587-21898ded5cc0",
          "name": "Interface2",
          "conditions": "None",
          "text": null,
          "description": "description",
          "children": [],
          "errors": null
        },
        {
          "orderIndex": 1,
          "id": "5a4f87ce-c527-4cc8-b587-26898ded5cc0",
          "parentId": "5a4f87ce-c527-4cc8-b587-23898ded5cc0",
          "name": "Interface6",
          "conditions": "None",
          "text": null,
          "description": "description",
          "children": [],
          "errors": null
        },
        {
          "orderIndex": 2,
          "id": "5a4f87ce-c525-4cc1-b587-25898ded5cc0",
          "parentId": "5a4f87ce-c52e-4cc1-b587-24898ded5cc0",
          "name": "Interface4",
          "conditions": "None",
          "text": null,
          "description": "description",
          "children": [],
          "errors": null
        }
      ],
      "errors": null
    }
  ]
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import { DataService } from './../data.service';
  import { Node } from '../_Models/Node';
  import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
  
  @Component({
    selector: 'app-vnf-main',
    templateUrl: './vnf-main.component.html',
    styleUrls: ['./vnf-main.component.css']
  })
  export class VnfMainComponent implements OnInit {
    tree: Node[];
  
    constructor(private dataService: DataService) {
    }
  
    ngOnInit() {
      this.dataService.tree$.subscribe(result =&gt; {
        this.tree = result;
      });
  
    drop(event: CdkDragDrop&lt;Node[]&gt;) {
      moveItemInArray(this.tree, event.previousIndex, event.currentIndex);
    }
  }
  </code></pre>
  
  <p>Template code:</p>
  
  <pre><code>&lt;table&gt;
       &lt;ng-template #recursiveList let-tree&gt;
           &lt;div cdkDropList (cdkDropListDropped)="drop($event)"&gt;
               &lt;div *ngFor="let node of tree; let i=index " cdkDrag&gt;
                   &lt;tr&gt;
                      &lt;app-default-node [node]="node"&gt;&lt;/app-default-node&gt;
                      &lt;td *ngIf="node.children!==null &amp;&amp; node.children.length &gt; 0" cdkDrag&gt;
                          &lt;ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: node.children }"&gt;&lt;/ng-container&gt;
                      &lt;/td&gt;
                   &lt;/tr&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/ng-template&gt;
  &lt;/table&gt;
  &lt;ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tree }"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>Also: How can I know the Node being dragged and the node it was dropped after? I haven't been able to find an answer anywhere but if I can get these two I might be able to solve it by traversing the tree and doing everything by hand.</p>
  
  <p>Thanks in advance and for getting this far and reading the whole question.</p>