• clone this repo
• do npm install
• npm start

Steps to integrate JsPlumb:

1. install the jsplumb package

   npm install jsplumb --save

2. add jsplumb js file in the index page or in the angular-cli.json file

   In index.html

   <script href="../node_modules/jsplumb/dist/js/jsplumb.min.js"></script>

   or

   In angular-cli.json

   "scripts": [
    "../node_modules/jsplumb/dist/js/jsplumb.min.js"
    ],

3. declare jsplumb in your component class where you are going to write the actual jsplumb connection logic

   declare var jsPlumb: any;

4. initialize the jsplumb instance inside AfterViewInit hook of angular.

   jsPlumbInstance;
    ngAfterViewInit() {
    this.jsPlumbInstance = jsPlumb.getInstance();
    }

5. start writing the actual jsplumb logic (for ex. connecting two elements)

   connectSourceToTargetUsingJSPlumb() {
    let labelName;
    labelName = 'connection';
    this.jsPlumbInstance.connect({
    connector: ['Flowchart', {stub: [212, 67], cornerRadius: 1, alwaysRespectStubs: true}],
    source: 'Source', // it is the id of source div
    target: 'Target1', // it is the id of target div
    anchor: ['Right', 'Left'],
    paintStyle: {stroke: '#456', strokeWidth: 4},
    overlays: [
    ['Label', {label: labelName, location: 0.5, cssClass: 'connectingConnectorLabel'}]
    ],
    });
    }

6. The html code

   <div class="container">
    <span class="btn btn-primary" (click)="connectSourceToTargetUsingJSPlumb()">Connect</span>
    <div class="row">
    <div class="col-md-12">
    <div class="alignleft">
    <div class="customBox" id="Source">
    Source
    </div>
    </div>
    <div class="alignright">
    <div class="customBox" id="Target1">
    Target 1
    </div>
    </div>
    <div style="clear: both;"></div>
    </div>
    </div>
   </div>

https://stackblitz.com/edit/angular-jsplumb