DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

Angular 4/Angular 2 Integration

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

Typescript vs Javascript

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

Components

Angular 2 and Angular 4 are component based - everything is a component. 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.

Example
<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.

Example
<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.

Example
<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


Typescript Integration

jsPlumb's Angular 2/Angular 4 integration and demonstrations are based on the Quickstart Guide. This page provides a high level overview; for more detailed information see the Angular Demonstration documentation.

Imports

You need to include the jsPlumb Toolkit and the jsPlumb Toolkit Angular Typescript adapter.

Toolkit Edition
NPM

Since the Toolkit edition is not open source, if you need to include it as an import in package.json, you can use (from NPM 3+) a local import:

"dependencies": {
    ...
    "jsplumbtoolkit":"file:./somewhere/jsplumbtoolkit.tgz",
    ...
},
<script src="node_modules/jsplumbtoolkit/dist/js/jsplumbtoolkit.js"></script>
Standard Include
<script src="somewhere/jsplumbtoolkit.js"></script>
Angular Typescript adapter

This - `jsplumbtoolkit-angular.ts - is a Typescript file. The easiest thing to do is to include it alongside the other Typescript files in your application.

Typescript Definitions

Since the jsPlumb Community and Toolkit editions are Javascript files, you will probably need to import the Typescript Definition files for these. The Typescript definition files are stored in the types directory in the root of your licensed download: there's a jsplumb and a jsplumbtoolkit directory, each of which contains an index.d.ts and a package.json.

Here's how the Angular demo imports the Typescript definitions:

"dependencies": {
    ...    
    "jsplumbtoolkittypes":"file:../../types/jsplumbtoolkit",
    "jsplumbtypes":"file:../../types/jsplumb",
    ...
}

When you run npm install these definitions are copied into node_modules/@types/jsplumb and node_modules/@types/jsplumbtoolkit. These are appropriate locations for the Typescript module loader to find, as long as you use "moduleResolution": "node", in your Typescript config.

Components

jsPlumb offers three components:

  • jsplumb-toolkit - A Toolkit instance and associated Surface widget
  • jsplumb-miniview - A miniview you can attach to a Surface
  • jsplumb-palette - A palette from which nodes can be dragged onto a Surface

Imports

Module imports

To import the Toolkit into your module:

import { jsPlumbToolkitModule } from "./jsplumbtoolkit-angular2";

...

@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 2 Typescript demo that ships with the Tookit (linked below).

Component imports

To import components inside a .ts file:

import { jsPlumbToolkitComponent, jsPlumbMiniviewComponent, jsPlumbPaletteComponent } from "./jsplumbtoolkit-angular2"

Further Reading

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

TOP