Drag and drop using ng2-dragula between two angular components

Question

I have two angular components, one called pallet containing individual pallet items and another called host which is initially empty. I've declared ndragula directives for each of these components ('pallet-bag' and 'host-bag' respectively). I'm able to reorder pallet items within my pallet component without any problems but when i attempt to drag pallet items across to my host component, it doesn't accept the drop action. Is there anything specific i have to configure to get my host to accept items from the pallet ?

HTML for the palette is :

<ul class="palette">
 <app-palette-item [dragula]='"palette-bag"' id="palette" *ngFor="let item of Items" [Name]="item.Name" [Description]="item.Description" [Icon]="item.Icon"></app-palette-item>
 </ul>

And for the host :

<div class="host" id="host" [dragula]='"host-bag"' [dragulaModel]='Items'>
  <div *ngFor='let text of Items' [innerHtml]='text'></div>  
</div>

My top level app component is like this:

<div>
  <app-palette id="palette"></app-palette>
  <app-host id="host"></app-host>
</div>

Answer 1

In order to allow the drag and drop between your two bag, they must have the same name (for exemple: "fisrt-bag"):

For the palette:

<ul class="palette">
 <app-palette-item [dragula]='"first-bag"' id="palette" 
 *ngFor="let item of Items" [Name]="item.Name" 
 [Description]="item.Description" [Icon]="item.Icon"></app-palette-item>
</ul>

For the host :

<div class="host" id="host" [dragula]='"first-bag"' [dragulaModel]='Items'>
  <div *ngFor='let text of Items' [innerHtml]='text'></div>  
</div>