How to make Dragula a global provider in Angular 2 to share across components

Question

I'm trying to make it so that I can drag and drop nicely between components, but having Dragula set up the recommended way means that each component has its own copy of Dragula. So I can't drag and drop between the components.

I've tried to make Dragula be a global provider using the UpgradeAdaptor, but possibly that's not the right way to go about it. I'm quite new to Angular

Here is the component that I'm hoping to reuse:

import {Component, Input, Inject}   from "@angular/core";
import {Dragula, DragulaService}   from "ng2-dragula/ng2-dragula";

@Component({
  selector: "drag-container",
  template: require("../templates/draggable/drag-container"),
  directives: [Dragula],
  viewProviders: [],
  providers: []
})

export class DragContainer<T> {
  @Input() items: Array<T>;
  @Input() edit: boolean;

  constructor(private dragulaService: DragulaService) { }
}

And where I'm trying to make Dragula be global:

import {UpgradeAdapter}                             from "@angular/upgrade";
import {DragulaService}                             from "ng2-dragula/ng2-dragula";

export const adapter = new UpgradeAdapter();

window["foo"].coursesAdapter = adapter;

// Angular 2 services
adapter.addProvider(DragulaService); 

// Angular 1 services we want to use in Angular 2 components
adapter.upgradeNg1Provider("$routeParams");
adapter.upgradeNg1Provider("translate");
adapter.upgradeNg1Provider("showError");
adapter.upgradeNg1Provider("$location");

And right now, I can still drag and reorder within the component, but I can't move it across the components. And they have the same bag name.

Answer 1

Keep in app component:

directives: [Dragula],
encapsulation: ViewEncapsulation.None,
viewProviders: [DragulaService]

In subcomponents, just:

    directives: [Dragula]