title: Angular 7 - Drag drop with parent droppable container
body: <p>I'm trying to use the new Angular 7 CDK Drag and drop to move a list of elements in my site that are added dynamically.</p>
  
  <p>Using <strong><a href="https://stackblitz.com/edit/angular-tsd73b" rel="nofollow noreferrer">this example</a></strong>, taken from angular docs examples and modified for my needs, there you can see that I have a list of elements with a droppable container.</p>
  
  <p>The problem is that when the draggable elements are generated from another component, they do not take the parent droppable as the referenced droppable container to be used. Instead the droppable container property in the CDK Draggable object is <code>null</code>.</p>
  
  <p>I've tried setting the <code>cdkDragRootElement</code> property from <code>CdkDrag</code> directive to check if somehow I could reference the parent element, but instead it makes the elements move whole parent element. This is not the expected behaviour.</p>
  
  <p>Maybe am I missing a CDK Draggable property or in CDK Droppable container to reference the parent droppable list in my list elements?</p>
  
  <p>Here is the "relevant" code in the example:</p>
  
  <p><strong>cdk-drag-drop-sorting-example.html</strong></p>
  
  <pre><code>&lt;div cdkDropList class="example-list"&gt;
    &lt;app-test&gt;&lt;/app-test&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>test/test.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
  
  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
  })
  export class TestComponent implements OnInit {
    movies = [
      'Episode I - The Phantom Menace',
      'Episode II - Attack of the Clones',
      'Episode III - Revenge of the Sith',
      'Episode IV - A New Hope',
      'Episode V - The Empire Strikes Back',
      'Episode VI - Return of the Jedi',
      'Episode VII - The Force Awakens',
      'Episode VIII - The Last Jedi'
    ];
  
    constructor() { }
  
    ngOnInit() {
    }
  
    drop(event: CdkDragDrop&lt;string[]&gt;) {
      console.log(event);
      /*moveItemInArray(this.movies, event.previousIndex, event.currentIndex);*/
    }
  
  }
  </code></pre>
  
  <p><strong>test/test.component.html</strong></p>
  
  <pre><code>&lt;div class="example-box" *ngFor="let movie of movies" cdkDrag (cdkDragDropped)="drop($event)"&gt;
    {{movie}}
  &lt;/div&gt;
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>Expected result:</p>
  
  <p><strong>cdk-drag-drop-sorting-example.html</strong></p>
  
  <pre><code>&lt;div cdkDropList class="example-list"&gt;
    &lt;app-test&gt;&lt;/app-test&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>test/test.component.html</strong></p>
  
  <pre><code>&lt;div class="example-box" *ngFor="..." cdkDrag cdkDropList=".example-list"&gt;
    {{movie}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Go through parents to find the selector and check if it has a <code>cdkDropList</code> directive/instance and attach it to the <code>cdkDrag</code>.</p>