Priyesha

<div class="container">
    <div class="panel-one">
        <app-node [nodes]="nodes"></app-node>
    </div>
    <div class="vl"></div>
    <div class="panel-two"></div>
</div>

Priyesha

public addDynamicNode(node: any) {
      const factory = this.factoryResolver.resolveComponentFactory(DynamicNodeComponent);
      const component = factory.create(this.rootViewContainer.parentInjector);
      (<any>component.instance).node = node;
      (<any>component.instance).jsPlumbInstance = this.jsPlumbInstance;
      this.rootViewContainer.insert(component.hostView);
}

Priyesha

ngAfterViewInit() {
    this.sourceEndPoint = this.jsPlumbInstance.addEndpoint(this.node.id,
      { anchor: 'Right', uuid: this.node.id + 'right' }, this.source);
    if (this.node.type !== 'start') {
      this.destinationEndPoint = this.jsPlumbInstance.addEndpoint(this.node.id,
        { anchor: 'Left', uuid: this.node.id + 'left' }, this.destination);
    }
    this.jsPlumbInstance.draggable(this.node.id);
 }

Priyesha

 <div (dblclick)="editNode(node)" class="node"  id="{{node.id}}" style="top: 0; left: 50%;">
    {{node.name}}
    <i (click)="removeNode(node)" class="material-icons close">clear</i>
  </div>

Priyesha

removeNode(node) {
this.jsPlumbInstance.removeAllEndpoints(node.id);
this.jsPlumbInstance.remove(node.id);
}

Priyesha

ngAfterViewInit() {
    this.nodeService.jsPlumbInstance.bind('connection', info => {
      this.simpleModalService.addModal(DialogComponent, {
        title: 'Dialog',
        questions: { name: '', type: ''}})
        .subscribe((result) => {
          const targetNode = this.nodes.find(node => node.id === info.targetId);
          if (targetNode) {
            targetNode.name = result.name;
            targetNode.type = result.type;