JsPlumb with Angular2

Question

I am trying to use jsplumb to display connections between two components.

What i end up doing is using jQuery to get the handle to the UI Element and use it to render connections, with jsplumb library. Something as below:

JsPlumb Configuration

if( typeof jsPlumb !== 'undefined' && jsPlumb !== null ) {
  jsPlumb.ready(function() {
    jsPlumb.deleteEveryEndpoint();
    jsPlumb.setContainer(this._container);
    jsPlumb.Defaults.PaintStyle = { strokeStyle:'#339900', lineWidth:2, dashstyle: '3 3'};
    jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:'#339900' };
    jsPlumb.importDefaults({
      Connector : [ 'Flowchart', { curviness:0 } ],
      ConnectionsDetachable:true,
      ReattachConnections:true
    });
    jsPlumb.endpointClass = 'endpointClass';
    jsPlumb.connectorClass = 'connectorClass';
  });
}

Js-Plumb Usage

jsPlumb.connect({
  source: $('#'+entityFrom+'Panel'),
  target: $('#'+entityTo+'Panel'),
  anchors: ['RightMiddle', 'LeftMiddle']
});

From various blogs on angular2, i understand that using jQuery with ng2 is an anti pattern.

Can some-one provide an alternative or a better design approach to use jsPlumb with angular2 or any other similar library.

Answer 1

Im in a similar situation where i need to use JSplumb with angular 2. The approach I took is to use the typescript wrapper of jsplumb and integrate with angular 2 with default tools it provides. this is the approach that worked in integrating other similar libraries but didn't work for jsplumb due to the unavailability of valid typed wrapper for the jsplumb library.

I contacted JSplumb team for a valid wrapper to be used in angular 2 but they refused saying angular 2 is not their immediate pipeline