title: Angular2 primeNg drag and drop not workinf if pDroppable is within an *ngFor loop
body: <p>I have a simple scenario which resembles pretty much the example of drag&amp;drop provided in the primeNg showcase.</p>
  
  <p>I have an array of '<em>draggableThings</em>' that represents the objects that can be dragged. Such <em>draggableThings</em> appear on the screen in form of a column (on left side of the browser just for sake of details).</p>
  
  <p>I have also an array of '<em>baskets</em>' where the <em>draggableThings</em> can be dropped. The <em>baskets</em> appear on the screen as a row at the bottom of the screen.</p>
  
  <p>My problem is that if I create the row of <em>baskets</em> with an <code>*ngFor</code> loop, the <code>pDroppable</code> directive seems not to work (i.e. the <code>onDrop</code> event is not called when dropping a <em>droppableThing</em> into one <em>basket</em>).</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;div class="ui-grid ui-grid-pad ui-grid-responsive"&gt;
      &lt;div id="plan-area" class="ui-grid-row"&gt;
  
        &lt;!-- ************************  --&gt;
        &lt;!--     LEFT SIDEBAR          --&gt;
        &lt;!-- ************************  --&gt;
        &lt;div class="ui-grid-col-1 ui-widget-content"&gt;
          &lt;ul style="margin:0;padding:0"&gt;
              &lt;li *ngFor="let droppableThing of droppableThings" 
                  class="ui-state-default ui-helper-clearfix" pDraggable="droppableThings"
                  (onDragStart)="dragStart($event,droppableThing)" (onDragEnd)="dragEnd($event)"&gt;
                  &lt;dthing [droppableThing]="droppableThing"&gt;&lt;/dthing&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;!-- ************************  --&gt;
        &lt;!--          CHART AREA       --&gt;
        &lt;!-- ************************  --&gt;
  
        &lt;div id="chart-area" pDroppable="droppableThings" (onDrop)="drop($event)" 
          class="ui-grid-col-9" [class.ui-state-highlight]="draggedThing"&gt;
              &lt;div class="planning-timeline" class="ui-grid-row"&gt;
                  &lt;div class="basket"&gt;
                          BasketA
                  &lt;/div&gt;
                  &lt;div class="basket"&gt;
                          BasketB
                  &lt;/div&gt;
                  &lt;div *ngFor="let basket of getBaskets(); let i=index" class="basket"&gt;
                          basket {{i}}
                  &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this html drag&amp;drop works correctly for <em>BasketA</em> and <em>BasketB</em> but dose not work for the <em>baskets</em> created as part of the <code>*ngFor</code> loop.</p>
  
  <p>Any help is very appreciated.</p>
  
  <p>Thanks in advance</p>