Angular wrapper for the popular xyflow (formerly Reactflow) library
npm install 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.
bash
npm install ngx-xyflow
`$3
`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
$3
`html
[nodes]="nodes"
[edges]="edges"
>
color="pink"
[gap]="20"
[size]="2"
/>
(onFitView)="log('onFitView')"
(onInteractiveChange)="log('onInteractiveChange ' + $event)"
(onZoomIn)="log('onZoomIn')"
(onZoomOut)="log('onZoomOut')"
/>
(onClick)="log('onMinimapClick')"
(onNodeClick)="log('onMinimapNodeClick')"
/>
`
$3
`html
[nodes]="nodes"
[edges]="edges"
>
nodeType="selectorNode"
>
{{data.label}}
type="target"
position="left"
[isConnectable]="true"
/>
type="source"
position="right"
id="b"
/>
``