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

1npm install ngx-xyflow

Import the module into your component

1import { Component } from '@angular/core';
2import { XYFlowModule } from 'ngx-xyflow';
3
4@Component({
5    selector: 'app-test',
6    template: '<ngx-xyflow [nodes]="nodes" [edges]="edges"/>',
7    imports: [
8        XYFlowModule
9    ],
10    standalone: true
11})
12export class TestComponent {
13    nodes = [];
14    edges = [];
15}
16

Examples

Basic Configuration

1<ngx-xyflow
2    [nodes]="nodes"
3    [edges]="edges"
4>
5    <!-- The background is configurable in the same manner as the original React component. -->
6    <ngx-xyflow-background
7        color="pink"
8        [gap]="20"
9        [size]="2"
10    />
11
12    <!-- Controls can also be configured, and events will fire normally. -->
13    <ngx-xyflow-controls
14        (onFitView)="log('onFitView')"
15        (onInteractiveChange)="log('onInteractiveChange ' + $event)"
16        (onZoomIn)="log('onZoomIn')"
17        (onZoomOut)="log('onZoomOut')"
18    />
19
20    <!-- Add the minimap. -->
21    <ngx-xyflow-minimap
22        (onClick)="log('onMinimapClick')"
23        (onNodeClick)="log('onMinimapNodeClick')"
24    />
25</ngx-xyflow>

Custom Nodes

1<ngx-xyflow
2    [nodes]="nodes"
3    [edges]="edges"
4>
5    <!-- Here, nodeType refers to the `type` property on an individual node's JSON. -->
6    <ngx-xyflow-node
7        nodeType="selectorNode"
8    >
9        <!-- The default template is used as this reduces DOM cluttering. -->
10        <ng-template let-data>
11            <div class="custom_node">
12                {{data.label}}
13            </div>
14        </ng-template>
15
16        <!-- You can also define the handles here -->
17        <ngx-xyflow-handle
18            type="target"
19            position="left"
20            [isConnectable]="true"
21        />
22
23        <ngx-xyflow-handle
24            type="source"
25            position="right"
26            id="b"
27        />
28    </ngx-xyflow-node>
29</ngx-xyflow>