Angular Jsplumb Integration

To use this repo code as it is, follow the below steps

• clone this repo
• do npm install
• npm start

To Integrate jsplumb in your any angular project, follow below steps

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>

Demo

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