dragData: undefined, between modules

[iflorovic]

I am trying to drag and drop elements across modules and when draggable and droppable elements are not on the same module dragData is undefined.

DndModule is imported in shared module that both modules use.

[Maat5]

Having the same issue, DndModule imported in shared module but always got undefined when onDropSuccess it's fired

[rrstux]

Experiencing the same issue here. Did someone find a solution for this?

[steveAllen0112]

Same issue.

[mohanatbst]

I also have the same issue. its kind of showstopper for the use case i have.

[rrstux]

I found a solution to fix this. The problem is with the service provider, because the provider is instantiated with the module you start to use DnD. To fix this, I created a singleton that's communicating between the two modules I want to use DnD.

import { EventEmitter } from '@angular/core';
import { DragDropData } from 'ng2-dnd';
export class DndInterModuleCommunicationService {
    private static sharedInstance: DndInterModuleCommunicationService;
    public static getInstance(): DndInterModuleCommunicationService {
        if (this.sharedInstance == undefined) {
            let instance = new DndInterModuleCommunicationService();
            return DndInterModuleCommunicationService.sharedInstance;
        } else {
            return DndInterModuleCommunicationService.sharedInstance;
        }
    }
    constructor() {
        if (DndInterModuleCommunicationService.sharedInstance == undefined) {
            // constructor
            DndInterModuleCommunicationService.sharedInstance = this;
        } else {
            throw new Error('Please use DndInterModuleCommunicationService.getInstance()');
        }
    }
    public dragDropData: EventEmitter<DragDropData>;
    public setDragDropData($event) {
        this.dragDropData = $event;
    }
    // Call this after getting with drop.
    public unsetDragDropData() {
        if (this.dragDropData !== undefined) {
            this.dragDropData = undefined;
        }
    }
}

MODULE 1:

COMPONENT .TS

import {
  DndInterModuleCommunicationService
} from '......dnd-inter-module-communication.service';

public dndInterModuleCommunicationService: DndInterModuleCommunicationService = DndInterModuleCommunicationService.getInstance();

HTML <div class="property-box-v2-wrapper col-md-12" dnd-draggable [dragEnabled]="true" [dragData]="property" (onDragStart)="dndInterModuleCommunicationService.setDragDropData($event)"> .....

MODULE 2:

COMPONENT.TS

import { DndInterModuleCommunicationService } from './dnd-inter-module-communication.service';

public dndInterModuleCommunicationService: DndInterModuleCommunicationService = DndInterModuleCommunicationService.getInstance();

HTML <div *ngFor="let item of items" dnd-droppable (onDropSuccess)="simpleDrop(dndInterModuleCommunicationService.dragDropData, item)"

[devniz]

@robertsan96 This doesn't solve anything, please provide a plunker to test.