title: Angular Drag and drop is not working if using *ngFor in cdkDropList
body: <p>I was tried to using angular material drag and drop and I was looping through <code>cdkDropList</code> container. I'm not able to drag the items from Catalogue to (to do )list. If I'm not using any loop then it's working fine.</p>
  
  <p>Here is my <a href="https://stackblitz.com/edit/angular-iexh17?file=package.json" rel="nofollow noreferrer">stackblitz link</a></p>
  
  <p>I tried without loop that is working fine</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div cdkDropList #todoList="cdkDropList"  [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
    class="column-list" (cdkDropListDropped)="drop($event)" 
    &lt;div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
    'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y"&gt;
      {{item.Name}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but if I'm adding this <code>*ngFor</code> it's not working</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div cdkDropList #todoList="cdkDropList"  [cdkDropListData]="todo" [cdkDropListConnectedTo]="[done]" [id]="item"
    class="column-list" (cdkDropListDropped)="drop($event)" *ngFor="let item of signalContainer"&gt;
    &lt;div class="column-box" [ngClass]="[(item.Name=='R') ?'Red':'',(item.Name=='G') ?'Green':'',(item.Name=='B') ?
    'Blue':'',(item.Name=='Y') ?'Yellow':'',(item.Name=='O') ?'Orange':'']" *ngFor="let item of items3" cdkDrag cdkDragLockAxis="y"&gt;
      {{item.Name}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>