Search code examples
angularmodal-dialogangular-cdk-drag-drop

Making dynamically added component draggable

I'm dynamically creating Angular component on click event using passed placeholder ViewContainerRef reference (method createComponent). Then in the same method I'm using modal.open to open a new NgbModal dialog. Everything works smoothly, except dragging. With such approach unlike to my static markup dialogs, I cannot provide its draggable feature, because directive (cdkDragDrop) doesn't work for dynamically created content as far as I understand. So how to resolve this issue? Any hints?

Solution

  • I managed to make it in a bit hacky way:

      this.notificationModalRef = this.modalService.open(notificationComponentRef.instance.notificationContent, { centered: true, size: 'xl', scrollable: true });
  this.dragDrop.createDrag((this.notificationModalRef as any)._windowCmptRef.instance._dialogEl);