Angular Skeleton

This demonstration shows how to perform the basic tasks needed to get a Toolkit application up and running
with Angular. The app was created with Angular CLI 6. The code is documented throughout so this page just gives a brief
overview.

Imports

Setup

import{BrowserModule}from'@angular/platform-browser';import{NgModule,CUSTOM_ELEMENTS_SCHEMA}from'@angular/core';import{AppComponent}from'./app.component';import{KneeBoneComponent}from'./knee-bone-component';import{ShinBoneComponent}from'./shin-bone-component';import{jsPlumbToolkitModule}from"jsplumbtoolkit-angular";@NgModule({declarations:[AppComponent,KneeBoneComponent,ShinBoneComponent// Any components used to render nodes/groups/ports must be declared in the `declarations` array],entryComponents:[KneeBoneComponent,ShinBoneComponent// Any components used to render nodes/groups/ports must also be declared in the `entryComponents` array],imports:[BrowserModule,jsPlumbToolkitModule// import the jsPlumbToolkitModule],providers:[],bootstrap:[AppComponent],schemas:[CUSTOM_ELEMENTS_SCHEMA]// JSPLUMB requires this})exportclassAppModule{}

Creating a Toolkit instance

We create a Toolkit instance via the jsPlumbService in the main component:

surfaceId - The ID of the Surface. Not strictly necessary in this app as no other component references the Surface,
but if you were using a palette like in the other Angular demonstrations, you'd need to set this.

toolkitId - The ID of the Toolkit instance. We create it in the ngOnInit method of the main component, and we
retrieve it in the Surface component.

view - Options for rendering nodes/groups/ports/edges.

renderParams - Options for the Surface component

View

The view is where we configure the renderer for, and behaviour of, nodes, edges, groups and ports. In this demonstration
we map two node types:

We use a Spring layout, we allow right click on the canvas, and we zoom the canvas to fit on data load.

Components

As mentioned above, KneeBoneComponent and ShinBoneComponent both extend BoneComponent. The source for each is
shown below. Both components use the same template - bone-component.html to render themselves.