DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

Angular Integration

The jsPlumb Toolkit has several components to assist you in integrating with Angular (4.x and 2.x - for Angular 1.x integration, refer to this page ).

Typescript vs Javascript

The default, and recommended, language for writing applications in Angular is Typescript. The jsPlumb Toolkit supports only Typescript.


CLI vs SystemJS

Early Angular 2 applications typically used SystemJS as a module loader, but it seems now that the Angular community has a preference for Angular CLI. jsPlumb uses CLI for its demonstrations, although there is still a version of the flowchart builder using SystemJS that is included in evaluation and licensee packages.


Available Components

Angular is component based. The Toolkit offers 3 components:

jsplumb-toolkit

This is an element component that provides an instance of the Toolkit and a Surface widget to render the contents.

<jsplumb-toolkit jtkId="toolkit" surfaceId="surfaceId" [renderParams]="anObjectReference" 
        [toolkitParams]="anObjectReference" [view]="anObjectReference" [nodeResolver]="aFunctionReference">
</jsplumb-toolkit>
Attributes

All attributes are optional except nodeResolver.

  • jtkId Unique ID for the Toolkit instance. Can be used to retrieve a Toolkit instance from the jsPlumb module.
  • surfaceId Unique ID for the Surface widget. Required if you wish to attach a Miniview or a Palette.
  • renderParams Parameters to pass in to the constructor of the Surface widget.
  • toolkitParams Parameters to pass in to the constructor of the Toolkit instance.
  • view View parameters. Views are discussed here.
  • nodeResolver This function is given thetype of some Node/Group to render, and is expected to return a component to render an object of that given type.

jsplumb-miniview

This is an element component that provides a Miniview that can be attached to some Surface.

<jsplumb-miniview surfaceId="surfaceId"></jsplumb-miniview>
Attributes
  • surfaceId ID for the Surface widget to which to attach the Miniview.

jsplumb-palette

This is an "attribute component": it is created by adding this attribute to some other element. The Palette component provides a means to implement drag/drop of new Nodes/Groups onto your Surface.

<div class="someClass" jsplumb-palette selector="li" surfaceId="surfaceId" [typeExtractor]="typeExtractor">
    <ul>
        <li data-node-type="foo">FOO</li>
        <li data-node-type="bar">BAR</li>
    </ul>
</div>
Attributes
  • selector A valid CSS3 selector identifying descendant nodes that are to be configured as draggable/droppables.
  • surfaceId The ID of the Surface to which to attach the Palette.
  • typeExtractor A Function that, given some DOM element, can return the type of the Node/Group the element represents. In this example, our typeExtractor function would return the value of the data-node-type attribute.
  • dataGenerator Not shown in our example, this optional Function can be used to provide default data for some Node/Group type.

For further reading on the concept of Palettes, see this page .

TOP


package.json

We use a package.json that looks like this:

{
    "name": "jsplumb-toolkit-angular",
    "version": "1.6.9",
    "license": "Commercial",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "prod-build":"ng build --prod --base-href .",
        "lint": "ng lint",
        "tscr":"tsc -traceResolution",
        "tsc":"tsc"
    },
    "private": true,
    "dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.5",
        "jsplumbtoolkit": "file:../../jsplumbtoolkit.tgz",
        "jsplumbtoolkit-angular":"file:../../jsplumbtoolkit-angular.tgz"
    },
    "devDependencies": {
        "@angular/cli": "1.2.4",
        "@angular/compiler-cli": "^4.0.0",
        "@types/jasmine": "2.5.38",
        "@types/node": "~6.0.60",
        "codelyzer": "~2.0.0",
        "ts-node": "~2.0.0",
        "tslint": "~4.4.2",
        "typescript": "~2.2.0"
    }
}

We use the prod-build npm task when we build our demos for hosting on our site or for distribution in a licensee download:

ng build --prod --base-href .

Since we import Angular CLI 1.x, a production build includes AOT, the ahead of time compilation ("tree shaking") process. Note also that we set a value for --base-href of .; we do this because Angular writes a <base> tag into the output HTML and by default it has a value of /. For our purposes we need the base to be the current directory.


tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true

  },
  "include":[ "src/**/*" ]
}

module needs to be set to commonjs and moduleResolution needs to be set to node.


Imports

jsPlumb Toolkit

The Toolkit is imported in package.json:

"dependencies": {
    ...
    "jsplumbtoolkit":"file:./somewhere/jsplumbtoolkit.tgz"
    ...
},

Typescript Definitions

The jsPlumb Toolkit is a Javascript file, for which there is an associated Typescript typings file declared in the Toolkit's package.json. Its resolution is automatically handled by npm during the npm install.

Angular Typescript adapter

This is also imported via your package.json:

"dependencies": {
    ...
    "jsplumbtoolkit-angular":"file:./somewhere/jsplumbtoolkit-angular.tgz",
    ...
},

Setup

To import the Toolkit into your module:

import { jsPlumbToolkitModule } from "jsplumbtoolkit-angular";

...

@NgModule({
    imports:      [ BrowserModule, jsPlumbToolkitModule ],
    declarations: [ AppComponent, QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent ],
    bootstrap:    [ AppComponent ],
    entryComponents: [ QuestionNodeComponent, ActionNodeComponent, StartNodeComponent, OutputNodeComponent ],
    schemas:[ CUSTOM_ELEMENTS_SCHEMA ]
})

The important bit here is the imports array. This example comes from the Angular demonstration that ships with the Toolkit.

Component imports

To import components inside a .ts file:

import { jsPlumbToolkitComponent, jsPlumbMiniviewComponent, jsPlumbPaletteComponent } from "jsplumbtoolkit-angular";

Further Reading

We refer you to the Angular Demonstration documentation. It uses all of the Angular integration discussed here.

TOP