https://github.com/jsplumb-demonstrations/angular-signals-integration

Provides an example of how to integrate with Angular's Signals system in JsPlumb Toolkit 6.x
https://github.com/jsplumb-demonstrations/angular-signals-integration

angular diagramming flowchart signals typescript

Last synced: about 21 hours ago
JSON representation

Provides an example of how to integrate with Angular's Signals system in JsPlumb Toolkit 6.x

• Host: GitHub
• URL: https://github.com/jsplumb-demonstrations/angular-signals-integration
• Owner: jsplumb-demonstrations
• Created: 2024-03-28T00:13:47.000Z (8 months ago)
• Default Branch: 6.x
• Last Pushed: 2024-09-16T05:55:03.000Z (2 months ago)
• Last Synced: 2024-09-16T07:03:59.646Z (2 months ago)
• Topics: angular, diagramming, flowchart, signals, typescript
• Language: TypeScript
• Homepage: https://jsplumbtoolkit.com
• Size: 229 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# AngularSignalsIntegration

**NOTE** Support for signals, based on the concepts in this repository, was added to JsPlumb in version 6.60.0.

 

This is a demonstration of how to use Signals from Angular 16 with the current version of JsPlumb Toolkit (at the time of writing this is 6.17.0, and this repository is setup to require 6.17.0, because that's the version we have tested this with, but there seems little reason to think this will not work with any 6.x version of JsPlumb).

You'll need to be JsPlumb licensee or [evaluator](https://jsplumbtoolkit.com/trial) to run this app.

## Setup

### package.json

JsPlumb is added to the `dependencies`:

```javascript

"dependencies":{

  

  ...

  "@jsplumbtoolkit/browser-ui-angular": "^6.17.0",

  ...

  

}

```

### Module import

This is an Angular 16 app which uses JsPlumb, so the JsPlumb module is imported in `app.module.ts`:

```javascript

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import {NodeComponent} from "./node.component"

import {jsPlumbToolkitModule} from "@jsplumbtoolkit/browser-ui-angular"

@NgModule({

  declarations: [

    AppComponent, NodeComponent

  ],

  imports: [

    BrowserModule, jsPlumbToolkitModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

### Node component

Notice above the `NodeComponent` in the `declarations` list - that's the component we use to render each node.  We map it inside our `view` in `app.component.ts`:

```javascript

  view = {

    nodes:{

      [DEFAULT]:{

        component:NodeComponent

      }

    }

  }

```

Take a look inside `node.component.ts` to see the code used to integrate with signals.  

## Further reading

Documentation on JsPlumb's Angular integration can be found here: [https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration](https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration)