What is ngx-workflow?

ngx-workflow is an Angular Signals library for building interactive flowchart and node-based workflow editors with ELK layout, smart edges, minimap, and studio chrome.

Which Angular versions does ngx-workflow support?

ngx-workflow supports Angular 17.1 through Angular 22.

How do I install ngx-workflow?

Install with npm install ngx-workflow, then import NgxWorkflowModule or the standalone diagram component.

Is ngx-workflow a React Flow alternative for Angular?

Yes. It is an Angular-native Signals alternative to React Flow / xyflow for flowchart and node-editor UIs.

DocsJump to section

connect

Emitted when a new connection is successfully created between ports.

CategoryEdge Events

Typeoutput<{ source: string; sourceHandle?: string; target: string; targetHandle?: string }>

Usage

<ngx-workflow-diagram
  (connect)="onConnect($event)"
/>

// Prefer (edgesChange) for controlled edge state —
// (connect) is a convenience event with the new link payload.

Interactive example

Diagram canvas

Interact with nodes and edges. Drag port-to-port to fire connect events.

Event log

No events logged yet.