Sunday, January 15, 2017

Angular 2 and jsPlumb

Here's an example showing how to start using jsPlumb with Angular 2.

Create a new project using the Angular CLI and add the jsPlumb package:

    ng new PROJECT_NAME
    cd PROJECT_NAME
    npm install jsplumb --save

Add the jsPlumb script to angular-cli.json:

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

Modify the app component:

    import { Component, ViewChild } from '@angular/core';

    declare var jsPlumb:any;

    @Component({
      selector: 'app-root',
      template: '<div #test>Test</div>'
    })
    export class AppComponent {
      @ViewChild('test') testEl;
      ngAfterViewInit() {
        let me = this;
        jsPlumb.ready(function() {
          jsPlumb.addEndpoint(me.testEl.nativeElement);      
        }); 
      }
 
Run the server:

    ng serve 
 

2 comments:

  1. Hi Dan,

    Nice tutorial. How can I pass the JSON for flowchart and generate that dynamically ?
    Please help.

    ReplyDelete
  2. even i have same question, please help us here

    ReplyDelete