Problem when create draggable components dynamically

[LoganFievez]

Hi, When I create a draggable component with the ComponentFactoryResolver in a ViewContainerRef, I have a problem with the events of the ngDraggable directive. The console tells me this.bounds.getBoundingClientRect is not a function. So, how can I fix it ?

PS: Sorry for my bad English

[LoganFievez]

I fix my problem, so, here is the solution in case you encounter the same problem In fact, in my dynamic component, I have an attribute that I link to the property [bounds] of the ngDraggable (E.g. : if you have <div #workspace></div>, so, you'll want to have [bounds]="workspace" in your ngDraggable). But, when I created it, I assign a string to this attribute like this:

(...)
item.data.bounds = 'workspace';
(...)
const factory = this.resolver.resolveComponentFactory(item.component);
const componentRef = this.vcr.createComponent(factory);
(<DynamicDraggableComponent>componentRef.instance).bounds = item.data.bounds;

And the solution is to get the HTMLElement

@ViewChild('workspace', { read: ElementRef }) elt: ElementRef;
(...)
const factory = this.resolver.resolveComponentFactory(item.component);
const componentRef = this.vcr.createComponent(factory);
(<DynamicDraggableComponent>componentRef.instance).bounds = this.elt.nativeElement;

More info about dynamic component generation on Angular official site

[ghost]

I have an issue with dynamically added draggable components as well (v1.3.1). It seems that some events get prevented when creating draggable components dynamically. My dynamically added component should close when clicked outside of the component, and the component does actually get closed if I don't use ngDraggable inside it.

The interesting part is that click events are catched correctly inside the parent component of the dynamically added draggable component but no events get to the "sibling" components.

There has be something to do with the angular2-draggable component, since everything works as expected when ngDraggable reference is removed.

Any ideas with my issue? (Using Angular 5.2.9 with angular2-draggable 1.3.1)

[RodrigoMtz10]

Hello @avhamalainen , I'm having the same issue, do you remember what was your solution to this problem?