ngxDraggable inside component dosen't emit value

[bartosz-brodzik]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Sorry, we will not be able to answer every support request.  Please consider other venues for support requests

Current behavior For most simple use case.

<div ngxDroppable (drop)="dropped($event)" >
  <custom-component1>
  <custom-component2>
</div>

custom-component1 template: <div ngxDraggable [model]="{name: 'custom1}">custom-1</div>
custom-component2 template: <div ngxDraggable [model]="{name: 'custom2}">custom-2</div>

While dropped, custom component will not emit any value. I can't just wrap my two components with div and attach ngxDraggable to that div because my custom components are created dynamically. After some digging in your code I found that the problem is in this line: this.drake.on('drag'....) { ... if (_this.draggableMap.has(el)) ... }

Because el is custom-component1 and draggableMap expects it to be the div inside it.

Expected behavior Be able to attach ngxDaggable inside custom component and still take advantage of [model] functionality. It's quite important in my use case so it would be great If some could look into that :).

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ngx-dnd version: 5.0.6

• Angular version: 6.0.7

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Hypercubed]

Can you create a demo that reproduces this issue?

[lokopak]

Try this:

In your

<div ngxDroppable (drop)="dropped($event)" >
<custom-component1  ngxDraggable [model]="{name: 'custom1}"></custom-component1>
<custom-component2   ngxDraggable [model]="{name: 'custom2}"></custom-component2>
</div>

In your templates:

custom-component1 template: <div>custom-1</div>
custom-component2 template: <div>custom-2</div>

In your custom components add: @Input() model: any;