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.

Outputs API · ngx-workflow

Connecting ports (quick example)

Drag from one port to another to create an edge. Listen to connect lifecycle events:

<ngx-workflow-diagram
  [nodes]="nodes()"
  [edges]="edges()"
  (edgesChange)="edges.set($event)"
  (connect)="onConnect($event)"
  (connectStart)="onConnectStart($event)"
  (connectEnd)="onConnectEnd($event)"
  (edgeDrop)="onEdgeDrop($event)"
/>

Node Events

Output	Type	Description
`(nodeClick)`	`output<Node>`	Emitted when a node is clicked.
`(nodeDoubleClick)`	`output<Node>`	Emitted when a node is double-clicked.
`(nodeMouseEnter)`	`output<Node>`	Emitted when the pointer enters a node.
`(nodeMouseLeave)`	`output<Node>`	Emitted when the pointer leaves a node.
`(nodeMouseMove)`	`output<{ node: Node; event: MouseEvent }>`	Emitted when the pointer moves over a node.
`(nodesChange)`	`output<Node[]>`	Emitted when the nodes array changes (move, add, delete, property edits).

Edge Events

Output	Type	Description
`(edgeClick)`	`output<Edge>`	Emitted when an edge is clicked.
`(edgeMouseEnter)`	`output<Edge>`	Emitted when the pointer enters an edge.
`(edgeMouseLeave)`	`output<Edge>`	Emitted when the pointer leaves an edge.
`(edgesChange)`	`output<Edge[]>`	Emitted when the edges array changes (connect, reconnect, delete).
`(connect)`	`output<{ source: string; sourceHandle?: string; target: string; targetHandle?: string }>`	Emitted when a new connection is successfully created between ports.
`(connectStart)`	`output<{ nodeId: string; handleId?: string }>`	Emitted when the user starts dragging a connection from a port.
`(connectEnd)`	`output<{ nodeId: string; handleId?: string }>`	Emitted when a connection drag ends (success or reject) over a target port.
`(edgeDrop)`	`output<{ sourceNodeId: string; sourceHandleId: string; position: XYPosition }>`	Emitted when a connection is dropped on empty canvas (no target port). Useful for “create node on drop” UX.
`(connectionDrop)`	`output<{ position: XYPosition; event: PointerEvent; sourceNodeId: string; sourceHandleId?: string }>`	Emitted when a connection line is dropped, including pointer event details.

Global Events

Output	Type	Description
`(paneClick)`	`output<{ event: MouseEvent; position: XYPosition }>`	Emitted when the empty canvas (pane) is clicked. Includes graph-space position.
`(paneScroll)`	`output<WheelEvent>`	Emitted when the user scrolls / zooms with the wheel on the canvas.
`(contextMenu)`	`output<{ type: 'node' \| 'edge' \| 'canvas'; item?: Node \| Edge; event: MouseEvent }>`	Emitted on right-click on the canvas, a node, or an edge.
`(beforeDelete)`	`output<{ nodes: Node[]; edges: Edge[]; cancel: () => void }>`	Cancellable event before deletion. Call cancel() to prevent removing the selection.
`(importError)`	`output<{ message: string; error?: unknown }>`	Emitted when JSON import fails validation or parsing.

Toolbar & Zoom Controls

Output	Type	Description
`(zoomControlsActionClick)`	`output<{ id: string; action: string; event: MouseEvent }>`	Emitted whenever any custom or built-in action button on the zoom & workflow toolbar is clicked.
`(fullscreen)`	`output<void>`	Emitted when canvas fullscreen is toggled via the toolbar.
`(undo)`	`output<void>`	Emitted when undo is triggered via the toolbar.
`(redo)`	`output<void>`	Emitted when redo is triggered via the toolbar.
`(zoomIn)`	`output<void>`	Emitted when zoom-in is triggered via the toolbar.
`(zoomOut)`	`output<void>`	Emitted when zoom-out is triggered via the toolbar.
`(resetZoom)`	`output<void>`	Emitted when 1:1 zoom reset is triggered via the toolbar.