Components are not draggable in Angular2 for Dart when bind objects using ngFor

Question

I've created a component which is a draggable element.

@Component(
    selector: 'draggable-component',
    styles: const ['.element-to-drag {background-color: yellow; border: 1px solid blue; height: 50px; width: 50px;}'],
    template: '''
      <div class="element-to-drag"
           draggable="true"
           (dragstart)="onDragStart(\$event)"
           (dragend)="onDragEnd(\$event)">
      </div>''')
class DraggableComponent {
  void onDragStart(MouseEvent e) {
    print('onDragStart');
  }

  void onDragEnd(MouseEvent e) {
    print('onDragEnd');
  }
}

When I use it as a single element it fires drag start event and COULD BE dragged to the drop zone.
When I create it using ngFor of primitives list (numbers) all elements fire drag start event and COULD BE dragged to the drop zone.
But when I create it using ngFor of objects list all elements fire drag start event but COULD NOT BE dragged to the drop zone (they are not dragged).

Here is an example:

@Component(
    selector: 'my-app',
    directives: const [DraggableComponent, NgFor],
    styles: const ['.container {border: 1px solid red;; height: 100px; width: 100px;}'],
    template: '''
  <div>
    <div class="container"></div>
    <h3>Single</h3>
    <draggable-component></draggable-component>
    <h3>Primitives</h3>
    <draggable-component *ngFor="#example of examplesPrimitives"></draggable-component>
    <h3>Objects</h3>
    <draggable-component *ngFor="#example of examples"></draggable-component>
  </div>
  ''')
class AppComponent {
  get examples => [
    {"name": 1},
    {"name": 2},
    {"name": 3},
    {"name": 4} ];

  get examplesPrimitives => [ 1,2,3,4,5];
}

How can I make bindings of objects draggable?

I am not 100% sure if this would work so I won't leave it as an answer but you could have the *ngFor loop outside <draggable-component> and create multiple draggable components each with their own object doing something like this <div *ngFor="#example of examples"><draggable-component [example] = example></draggable-component.</div> Then use an input: [example] inside your draggable-component directive. — Morgan G
Have you investigated the generated DOM? Are there differences? There shouldn't be differences IMHO. — Günter Zöchbauer
Morgan G, i tried this case as well and it does not work too. — ne4istb
Günter Zöchbauer, i've checked DOM and there is no difference. I also expected no difference in the behavior but something is wrong. Gonna to check the same case in Angular2 with TypeScript. — ne4istb

ne4istb ne4istb · Accepted Answer · 2016-02-09T19:39:34

It was Angular2 wit Dart bug. Angular2 with TypeScript works fine in the same case.

An issue was created in Angular repository: https://github.com/angular/angular/issues/6975

Components are not draggable in Angular2 for Dart when bind objects using ngFor

1 Answers