dragging and connecting dynamically created nodes in angular6 with jsplumb

[Mohammed lotf el ilah]

I'm trying to give to the user the ability to create, drag and connect multiple nodes but I still don't understand how angular render this or the life cycle of components and other, so even after a lot of research, I'm still unable to figure out how to fix the issues listed below.

Basically, I'm to trying to achieve what I already achieved with a simple HTML page, but this time here with Angular and angular is not making it easy for me. First I was struggling with making the new divs draggable, I managed to do that but new problems are on the table now:

• when new nodes are added the old ones return to their initial position, don't know why or how to fix it
• when they are returned to their initial position, their endpoints, which were painted earlier, are left behind and apparently new ones are created, don't know how to fix it
• neither the new endpoints or the old ones, none of them seems to be able to connect, don't know why or how to fix it
• even after checking out the doc I still don't understand how stuff in the code like AfterViewInit, ComponentFactoryResolver, parentInjector, resolveComponentFactory work, indeed they solved the draggability issue for me, but don't know why or how they fixed it.

So any help or explanation would reeeaally appreciated