{"id":28683520,"url":"https://github.com/knackstedt/ngx-xyflow","last_synced_at":"2026-01-18T11:26:50.676Z","repository":{"id":267351979,"uuid":"900979498","full_name":"knackstedt/ngx-xyflow","owner":"knackstedt","description":"Angular wrapper of xyflow (formerly Reactflow)","archived":false,"fork":false,"pushed_at":"2025-07-21T19:51:25.000Z","size":891,"stargazers_count":54,"open_issues_count":5,"forks_count":5,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-10-29T10:57:48.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/knackstedt.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-12-09T20:25:05.000Z","updated_at":"2025-10-08T20:23:37.000Z","dependencies_parsed_at":"2025-01-07T03:01:13.636Z","dependency_job_id":null,"html_url":"https://github.com/knackstedt/ngx-xyflow","commit_stats":null,"previous_names":["knackstedt/ngx-xyflow"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/knackstedt/ngx-xyflow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knackstedt%2Fngx-xyflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knackstedt%2Fngx-xyflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knackstedt%2Fngx-xyflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knackstedt%2Fngx-xyflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knackstedt","download_url":"https://codeload.github.com/knackstedt/ngx-xyflow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knackstedt%2Fngx-xyflow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28535164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T10:13:46.436Z","status":"ssl_error","status_checked_at":"2026-01-18T10:13:11.045Z","response_time":98,"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":[],"created_at":"2025-06-14T03:01:06.588Z","updated_at":"2026-01-18T11:26:50.644Z","avatar_url":"https://github.com/knackstedt.png","language":"TypeScript","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Wrappers"],"readme":"# ngx-xyflow\n\n\u003e This project is currently in a beta phase and features will be added upon pull requests.\nI will try to minimize breaking changes between minor version revisions but some may be made until we reach 1.0.0.\n\nThis project is a proper Angular wrapper of the React version of xyflow.\n\n## Quickstart\n### Install the Package\n```bash\nnpm install ngx-xyflow\n```\n\n### Import the module into your component\n```ts\nimport { Component } from '@angular/core';\nimport { XYFlowModule } from 'ngx-xyflow';\n\n@Component({\n    selector: 'app-test',\n    template: '\u003cngx-xyflow [nodes]=\"nodes\" [edges]=\"edges\"/\u003e',\n    imports: [\n        XYFlowModule\n    ],\n    standalone: true\n})\nexport class TestComponent {\n    nodes = [];\n    edges = [];\n}\n\n```\n\n## Examples\n\n### Basic Configuration\n\n```html\n\u003cngx-xyflow\n    [nodes]=\"nodes\"\n    [edges]=\"edges\"\n\u003e\n    \u003c!-- The background is configurable in the same manner as the original React component. --\u003e\n    \u003cngx-xyflow-background\n        color=\"pink\"\n        [gap]=\"20\"\n        [size]=\"2\"\n    /\u003e\n\n    \u003c!-- Controls can also be configured, and events will fire normally. --\u003e\n    \u003cngx-xyflow-controls\n        (onFitView)=\"log('onFitView')\"\n        (onInteractiveChange)=\"log('onInteractiveChange ' + $event)\"\n        (onZoomIn)=\"log('onZoomIn')\"\n        (onZoomOut)=\"log('onZoomOut')\"\n    /\u003e\n\n    \u003c!-- Add the minimap. --\u003e\n    \u003cngx-xyflow-minimap\n        (onClick)=\"log('onMinimapClick')\"\n        (onNodeClick)=\"log('onMinimapNodeClick')\"\n    /\u003e\n\u003c/ngx-xyflow\u003e\n```\n\n\n### Custom Nodes\n\n```html\n\u003cngx-xyflow\n    [nodes]=\"nodes\"\n    [edges]=\"edges\"\n\u003e\n    \u003c!-- Here, nodeType refers to the `type` property on an individual node's JSON. --\u003e\n    \u003cngx-xyflow-node\n        nodeType=\"selectorNode\"\n    \u003e\n        \u003c!-- The default template is used as this reduces DOM cluttering. --\u003e\n        \u003cng-template let-data\u003e\n            \u003cdiv class=\"custom_node\"\u003e\n                {{data.label}}\n            \u003c/div\u003e\n        \u003c/ng-template\u003e\n\n        \u003c!-- You can also define the handles here --\u003e\n        \u003cngx-xyflow-handle\n            type=\"target\"\n            position=\"left\"\n            [isConnectable]=\"true\"\n        /\u003e\n\n        \u003cngx-xyflow-handle\n            type=\"source\"\n            position=\"right\"\n            id=\"b\"\n        /\u003e\n    \u003c/ngx-xyflow-node\u003e\n\u003c/ngx-xyflow\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknackstedt%2Fngx-xyflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknackstedt%2Fngx-xyflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknackstedt%2Fngx-xyflow/lists"}