{"id":20595950,"url":"https://github.com/jsplumb-demonstrations/angular-signals-integration","last_synced_at":"2026-04-25T03:05:41.001Z","repository":{"id":230131504,"uuid":"778558937","full_name":"jsplumb-demonstrations/angular-signals-integration","owner":"jsplumb-demonstrations","description":"Provides an example of how to integrate with Angular's Signals system in JsPlumb Toolkit 6.x","archived":false,"fork":false,"pushed_at":"2024-09-16T05:55:03.000Z","size":234,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"6.x","last_synced_at":"2025-01-17T00:46:51.830Z","etag":null,"topics":["angular","diagramming","flowchart","signals","typescript"],"latest_commit_sha":null,"homepage":"https://jsplumbtoolkit.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsplumb-demonstrations.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-28T00:13:47.000Z","updated_at":"2024-09-16T05:55:07.000Z","dependencies_parsed_at":"2024-03-28T02:37:04.022Z","dependency_job_id":"9c211a72-4942-474b-8a64-78e83b7a213e","html_url":"https://github.com/jsplumb-demonstrations/angular-signals-integration","commit_stats":null,"previous_names":["jsplumb-demonstrations/angular-signals-integration"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fangular-signals-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fangular-signals-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fangular-signals-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Fangular-signals-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsplumb-demonstrations","download_url":"https://codeload.github.com/jsplumb-demonstrations/angular-signals-integration/tar.gz/refs/heads/6.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242231436,"owners_count":20093636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","diagramming","flowchart","signals","typescript"],"created_at":"2024-11-16T08:14:35.513Z","updated_at":"2026-04-25T03:05:40.958Z","avatar_url":"https://github.com/jsplumb-demonstrations.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularSignalsIntegration\n\n**NOTE** Support for signals, based on the concepts in this repository, was added to JsPlumb in version 6.60.0.\n \n\nThis 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).\n\nYou'll need to be JsPlumb licensee or [evaluator](https://jsplumbtoolkit.com/trial) to run this app.\n\n\n## Setup\n\n### package.json\n\nJsPlumb is added to the `dependencies`:\n\n```javascript\n\"dependencies\":{\n  \n  ...\n  \"@jsplumbtoolkit/browser-ui-angular\": \"^6.17.0\",\n  ...\n  \n}\n\n```\n\n### Module import\n\nThis is an Angular 16 app which uses JsPlumb, so the JsPlumb module is imported in `app.module.ts`:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\nimport {NodeComponent} from \"./node.component\"\nimport {jsPlumbToolkitModule} from \"@jsplumbtoolkit/browser-ui-angular\"\n\n@NgModule({\n  declarations: [\n    AppComponent, NodeComponent\n  ],\n  imports: [\n    BrowserModule, jsPlumbToolkitModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n### Node component\n\nNotice 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`:\n\n```javascript\n  view = {\n    nodes:{\n      [DEFAULT]:{\n        component:NodeComponent\n      }\n    }\n  }\n```\n\nTake a look inside `node.component.ts` to see the code used to integrate with signals.  \n\n\n## Further reading\n\nDocumentation 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)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsplumb-demonstrations%2Fangular-signals-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsplumb-demonstrations%2Fangular-signals-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsplumb-demonstrations%2Fangular-signals-integration/lists"}