{"id":19719175,"url":"https://github.com/9von10/ngx-cytoscapejs","last_synced_at":"2026-03-07T03:32:02.234Z","repository":{"id":40352104,"uuid":"489928333","full_name":"9von10/ngx-cytoscapejs","owner":"9von10","description":"Angular 13+ Cytoscape.js Wrapper","archived":false,"fork":false,"pushed_at":"2024-08-02T13:29:00.000Z","size":3102,"stargazers_count":16,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-26T18:17:32.019Z","etag":null,"topics":["angular","cytoscape","cytoscapejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/9von10.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-05-08T11:48:19.000Z","updated_at":"2024-08-25T11:36:31.000Z","dependencies_parsed_at":"2024-03-24T21:27:13.065Z","dependency_job_id":"a33f3245-1ab4-4cab-b4c4-04c8cdd94a8d","html_url":"https://github.com/9von10/ngx-cytoscapejs","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/9von10/ngx-cytoscapejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9von10%2Fngx-cytoscapejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9von10%2Fngx-cytoscapejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9von10%2Fngx-cytoscapejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9von10%2Fngx-cytoscapejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9von10","download_url":"https://codeload.github.com/9von10/ngx-cytoscapejs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9von10%2Fngx-cytoscapejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30206570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T03:24:23.086Z","status":"ssl_error","status_checked_at":"2026-03-07T03:23:11.444Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","cytoscape","cytoscapejs"],"created_at":"2024-11-11T23:06:41.701Z","updated_at":"2026-03-07T03:32:02.204Z","avatar_url":"https://github.com/9von10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003engx-cytoscapejs\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://9von10.github.io/ngx-cytoscapejs/\"\u003eDocumentation\u003c/a\u003e\n  ·\n  \u003ca href=\"https://9von10.github.io/ngx-cytoscapejs/demo-app/\"\u003eDemo\u003c/a\u003e\n\u003c/p\u003e\n\nThis library is a wrapper for [Cytoscape.js](https://js.cytoscape.org/) to be used from any Angular 13+ application.\n\n- Rendering of [Cytoscape.js](https://js.cytoscape.org/) and [CX](https://home.ndexbio.org/data-model/) graphs\n- Automatic rerendering on graph data changes\n- Automatic graph size adjustment on window resize\n\n## Table of contents\n\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Getting help](#getting-help)\n- [License](#license)\n- [Credits and references](#credits-and-references)\n\n## Dependencies\n\nngx-cytoscapejs depends on [Angular](https://angular.io/), [Cytoscape.js](https://js.cytoscape.org/), [cx2js](https://github.com/cytoscape/cx2js) and [cxVizConverter](https://github.com/cytoscape/cx-viz-converter).\n\n| ngx-cytoscapejs | Angular | Cytoscape.js | ng-add             |\n| --------------- | ------- | ------------ | ------------------ |\n| 0.3.x           | 13.x    | 3.x          | :x:                |\n| 1.0.x           | 13.x    | 3.x          | :x:                |\n| 1.1.x           | 13.x    | 3.x          | :x:                |\n| 1.2.x           | 13.x    | 3.x          | :x:                |\n| 1.3.x           | 13.x    | 3.x          | :heavy_check_mark: |\n| 1.4.x           | 14.x    | 3.x          | :heavy_check_mark: |\n| 1.5.x           | 15.x    | 3.x          | :heavy_check_mark: |\n| 1.6.x           | 16.x    | 3.x          | :heavy_check_mark: |\n| 1.7.x           | 17.x    | 3.x          | :heavy_check_mark: |\n| 1.8.x           | 18.x    | 3.x          | :x:                |\n\n## Installation\n\nAdd dependencies from npm:\n\n```shell´´\nnpm install --save ngx-cytoscapejs\n```\n\nThen import the CytoscapejsComponent into your component:\n\n```tsx\nimport { CytoscapejsComponent } from 'ngx-cytoscapejs';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [CytoscapejsComponent],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n})\nexport class AppComponent {}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eBefore 1.8.x\u003c/summary\u003e\n\nUsing the [Angular CLI](https://angular.io/cli) is recommended:\n\n```shell\nng add ngx-cytoscapejs@\u003cversion\u003e\n```\n\n### Manual installation\n\nAdd dependencies from npm:\n\n```shell\nnpm install --save-dev @types/cytoscape\nnpm install --save ngx-cytoscapejs@\u003cversion\u003e\n```\n\nThen import the CytoscapejsModule and add it to your module:\n\n```tsx\nimport { NgModule } from '@angular/core';\nimport { CytoscapejsModule } from 'ngx-cytoscapejs';\n\n@NgModule({\n  declarations: [...],\n  imports: [CytoscapejsModule],\n  providers: [...],\n  bootstrap: [...],\n})\nexport class AppModule {}\n```\n\n\u003c/details\u003e\n\n## Usage\n\nAdd the cytoscapejs directive to your component's HTML:\n\n```html\n\u003ccytoscapejs [cytoscapeOptions]=\"cytoscapeOptions\" [autoFit]=\"autoFit\" (coreChanged)=\"coreChanged($event)\"\u003e\u003c/cytoscapejs\u003e\n```\n\nConfigure the directive in your component:\n\n```tsx\nimport { Core, CytoscapeOptions } from 'cytoscape';\nimport { CxConverter } from 'ngx-cytoscapejs';\n\nexport class AppComponent {\n  cytoscapeOptions: CytoscapeOptions = {...};\n\n  autoFit: boolean = true;\n\n  coreChanged(core: Core): void {\n    // do something with the core\n  }\n}\n```\n\nThe component will take up 100% of the parent's height and width.\n\n## API\n\nFor a graph to render you have to provide either `cytoscapeOptions` or `cxData`. The remaining inputs are optional.\n\n### Inputs\n\n| Name                     | Type             | Default                 | Description                                                                                                                                                                                      |\n| ------------------------ | ---------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `cytoscapeOptions`       | CytoscapeOptions |                         | Your Cytoscape graph data. You don't have to provide the container property as it will be overwritten with the component's referenced DOM element.                                               |\n| `autoFit`                | boolean          | true                    | When set to true the graph will be fit every time the browser window is resized.                                                                                                                 |\n| `applyCxBackgroundColor` | boolean          | false                   | When set to true, the background color specified in the CX1 file will be applied to the visualization.                                                                                           |\n| `cxData`                 | any              |                         | Your CX graph data. The data is converted using the the converters provided in the `cxConverters` input.                                                                                         |\n| `cxConverters`           | CxConverter[]    | [cx2js, cxVizConverter] | Allows customizing the converters used by the library to convert the CX data. The library tries to convert the input data in the given order and renders the first successful conversion result. |\n\n### Outputs\n\n| Name                        | Type               | Description                                                             |\n| --------------------------- | ------------------ | ----------------------------------------------------------------------- |\n| `coreChanged`               | Core               | Emits a Core every time a new core is created.                          |\n| `cxAttributeNameMapChanged` | CxAttributeNameMap | Emits a CxAttributeNameMap every time a graph is converted using cx2js. |\n\n### Enums\n\n#### CxConverter\n\n| Value          | Description                          |\n| -------------- | ------------------------------------ |\n| cx2js          | Use cx2js for CX conversion          |\n| cxVizConverter | Use cxVizConverter for CX conversion |\n\n### Interfaces\n\n#### CxConversion\n\n| Value            | Type               | Description                                                                            |\n| ---------------- | ------------------ | -------------------------------------------------------------------------------------- |\n| options          | CytoscapeOptions   | The CytoscapeOptions object resulting from the conversion.                             |\n| attributeNameMap | CxAttributeNameMap | The attribute mapping created when converting the CX graph. This property is optional. |\n| backgroundColor  | string             | The background color extracted from the CX graph. This property is optional.           |\n\n#### CxAttributeNameMap\n\nProperties are unknown as they depend on the converted CX graph.\n\n## Getting help\n\nIf you have questions, concerns, bug reports, etc., please file an issue in [this repository's Issue Tracker](https://github.com/9von10/ngx-cytoscapejs/issues).\n\n## License\n\n[MIT](LICENSE)\n\n## Credits and references\n\n- [Cytoscape.js](https://js.cytoscape.org/)\n- [ngx-cytoscape](https://github.com/calvinvette/ngx-cytoscape)\n- [cytoscape-cx2js](https://github.com/cytoscape/cx2js)\n- [cxVizConverter](https://github.com/cytoscape/cx-viz-converter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9von10%2Fngx-cytoscapejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9von10%2Fngx-cytoscapejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9von10%2Fngx-cytoscapejs/lists"}