Angular : How to change dropped element dynamically on dragula ng2?

Question

I'm setting up an Ionic (4) app, where you can drag and drop elements from a toolbar into a window. I want to change the dropped elements depending on their types. I'm using ng2-dragula.

For exmaple I want to drop an element <ion-chip></ion-chip> and when it's dropped it should be something like <ion-card dragula="DRAGGABLE"></ion-card> .

-I tried changing the DOM outerHTML during an event ( https://github.com/valor-software/ng2-dragula/blob/master/modules/demo/src/app/examples/02-events.component.ts ), but then the dragula inside the new created element is not active.

-I tried *ngIf but this also seems not to load dynamically.

What other possibilities do I have?

<div dragula="DRAGULA_EVENTS">
  <div>content</div>
</div>

BAG = "DRAGULA_EVENTS";
subs = new Subscription();

export class EventsComponent{
 public constructor(private dragulaService: DragulaService){
   this.subs.add(this.dragulaService.drop(this.BAG)
      .subscribe(({el,source,target})=>{ 
         el.outerHTML = "<ion-card dragula='DRAGULA_EVENTS'>content</ion-card>"
      }
   } 
 })
}

I expect that the new DOM element has the property dragula like i set it on the outerHTML-tag.

Answer 1

I figured it out (works during dragging or dropping):

1. Nest the dragula element in a new

2. Create inside page.component.ts: this.subs.add(this.dragulaService.cloned(this.BAG).subscribe(({clone})=>{

3. Inside of this, with DOM methods, creating a new Element var new_El = document.createElement('ion-card')

4. Remove all Childs of the clone 'clone.removeChild(..)`
5. Bind the new Element inside the clone Element clone.appendChild(new_El)