Q:

Removing dynamic component from jQuery messes up the ViewContainerRef container

I have an angular 2+ app in which I am creating a bunch of dynamic components like so - 
@ViewChild("containerNode", { read: ViewContainerRef }) cardContainer;

const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
const ref = this.cardContainer.createComponent(factory);

I'm using jsPlumb (jQuery version) with which I am drawing these created components on to a canvas. Once these elements are part of the jsPlumb instance, jsPlumb provides options to remove the elements, add endpoints, etc.
Now, on a user (click) event, I am removing the element the user clicked on, like so - 
this.jsPlumbInstance.remove(ref.location.nativeElement);

Internally I assume this is just a jQuery remove. The problem I am facing is, after I remove this element using the above code, I'm not able to add any new components using the ViewContainerRef. After this line has executed, when I do this
const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
const ref = this.cardContainer.createComponent(factory);

the ref.location.nativeElement's parent nodes are null. I suspect that removing a component using the jQuery remove is somehow messing up the container and does not add new components properly to the parent. Note, I HAVE TO do a jsPlumb.remove as there are several other related events that will be fired internally by jsPlumb which must all execute when a component is removed from it (like all edges connected to it should also be removed, etc.)
Does anyone know what is happening here and how it can be fixed? Any help is appreciated.

A:

As mention in the above comment. One way to manipulate DOM element created by Angular in Angular way is using detach() method of ViewContainerRef class. Something like this: 
@ViewChild("containerNode", { read: ViewContainerRef }) cardContainer: ViewContainerRef;

...

// To remove/detach component in Angular way
this.cardContainer.detach();

