JSON error when using directives for copying objects

[cedWetzel]

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 => Please do not submit support request here

I am using dnd in an environment like your "Builder Demo" and recently followed your recommendation to move from components to directives.

Current behavior
When dragging an element from one container to another I get the following error:
ERROR SyntaxError: Unexpected token u in JSON at position 0

Expected behavior
I expect the same, working functionality like in component usage.

Reproduction of the problem
See
https://github.com/cedWetzel/dng-example/blob/master/src/app/app.component.html

And maybe #19
What is the motivation / use case for changing the behavior?
This should just work because ngx-dnd is just awesome.

Please tell us about your environment:

node: 7.4.0
os: darwin x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.7
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

• ngx-dnd version: 3.1.0

• Angular version: 4.4.6

• Browser: [all ]

EDIT:
My error, will explain my errors, maybe it will be helpful for others.

[sarora2073]

Thanks for posting the code for this scenario. The code above had a bit of a copy/paste duplication issue so I figured I share my working stackblitz.

https://stackblitz.com/edit/ngx-dnd-directive-example

Ideally the docs would get updated to show the directive approach for the builder, but in the mean time hope this helps anyone else.