ngx-reactflow

This library has been moved to ngx-xyflow!

Reactflow wrapper for Angular

This is a Reactflow wrapper library for Angular.

Installation

You can install the library with npm.

Angular 15+

    # Install ngx-reactflow and dependencies
    npm i ngx-reactflow reactflow react-dom react --save

    # Install type definitions
    npm i -D @types/react@18 @types/react-dom@18

You will also want to set useDefineForClassFields: false in your tsconfig.json

Getting started

Use NgxReactflow in your project:

import { Component } from '@angular/core';
import { ReactflowComponent } from 'ngx-reactflow';
import { Node, Edge } from 'reactflow';

@Component({
    selector: 'app-test-component',
    template: `<ngx-reactflow></ngx-reactflow>`,
    imports: [
        ReactflowComponent
    ],
    standalone: true
})
export class TestComponent {
    nodes: Node<any, string | undefined>[] = [];
    edges: Edge<any>[] = [];
}

Using Custom nodes