https://github.com/knackstedt/ngx-xyflow
Angular wrapper of xyflow (formerly Reactflow)
https://github.com/knackstedt/ngx-xyflow
Last synced: 5 days ago
JSON representation
Angular wrapper of xyflow (formerly Reactflow)
- Host: GitHub
- URL: https://github.com/knackstedt/ngx-xyflow
- Owner: knackstedt
- Created: 2024-12-09T20:25:05.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T01:54:18.000Z (2 months ago)
- Last Synced: 2025-05-31T23:52:59.181Z (18 days ago)
- Language: TypeScript
- Homepage:
- Size: 865 KB
- Stars: 42
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-xyflow - Angular wrapper of <b><code> 30057⭐</code></b> <b><code> 1943🍴</code></b> [xyflow](https://github.com/xyflow/xyflow)). (Table of contents / Angular)
- awesome-angular - ngx-xyflow - Angular wrapper of [xyflow](https://github.com/xyflow/xyflow). (Table of contents / Angular)
README
# ngx-xyflow
> This project is currently in a beta phase and features will be added upon pull requests.
I will try to minimize breaking changes between minor version revisions but some may be made until we reach 1.0.0.
This project is a proper Angular wrapper of the React version of xyflow.
## Quickstart
### Install the Package
```bash
npm install ngx-xyflow
```
### Import the module into your component
```ts
import { Component } from '@angular/core';
import { XYFlowModule } from 'ngx-xyflow';
@Component({
selector: 'app-test',
template: '',
imports: [
XYFlowModule
],
standalone: true
})
export class TestComponent {
nodes = [];
edges = [];
}
```
## Examples
### Basic Configuration
```html
```
### Custom Nodes
```html
{{data.label}}
```