Configuration & Public API

nodes:

A collection of Angular components that can be used as node content. The object keys serve as unique node type identifiers (specified in the node's data.type property).

Node CSS variables:

Node wrapper styles are controlled by CSS variables on ng-draw-flow . Override these variables globally from application styles to keep node content focused on layout, controls and connectors. For a particular node, set className in the node data, for example className: 'warning-node' , and override variables through that class.

    
      
    

      
        Copy
      
      
    
  

connection:

• type (default: DfConnectionType.Bezier ) - connection line style:
  • Bezier : Classic Bezier curves with control points
  • SmoothStep : Connections with straight segments and rounded corners
• curvature

  • For Bezier : A dimensionless coefficient that controls how strongly the connection bends

    Since v0.14.0: The value is relative to the distance between connectors. In earlier versions it was a fixed pixel offset for control points.

  • For SmoothStep : Determines the corner rounding radius in pixels
  • arrowhead
    • type : arrowhead shape ( DfArrowhead.Arrow , DfArrowhead.ArrowClosed , DfArrowhead.None )
    • width : arrowhead width in pixels
    • height : arrowhead height in pixels

options:

• nodeDragThreshold (default: 1)

  Defines the minimum distance (in pixels) required to initiate node dragging:

  • Value 1 prevents accidental drag events during clicks
  • 0 Dragging starts immediately (may interfere with interactions)
• nodesDraggable (default: true)

  Disables node dragging when set to false .

• nodesDeletable (default: true)

  Prevents deleting nodes via keyboard when false .

• connectionsCreatable (default: true)

  Disallows creating new connections when set to false .

• connectionsDeletable (default: true)

  Prevents connection deletion when set to false .

Public API

The ng-draw-flow component exposes these public methods for programmatic control:

• zoomIn(): void : Zooms the workspace in by one step (as defined by the zoomStep configuration).
• zoomOut(): void : Zooms the workspace out by one step (as defined by the zoomStep configuration).
• resetPosition(): void : Resets zoom to 1.0 and pan to the default camera state. If leftPosition or topPosition are configured, the viewport is then reframed using the same content-based alignment rules as the initial render:
  • With both values set to null, the camera returns to the world origin
  • With configured offsets, the viewport aligns to the start node or rendered content bounds
• setPosition(position?: { x?: number; y?: number; zoom?: number }): void : Partially updates the current camera state. Omitted fields keep their current values, so you can move only along one axis, change only the zoom level, or update both pan and zoom in one call.
• setScale(scale: number): void : Applies an absolute zoom factor (1 === 100%), automatically clamped between the configured minZoom and maxZoom bounds.
• removeConnection(connection: DfDataConnection): void : Programmatically removes a connection between nodes. The connection object must match exactly one existing connection in the graph.
• removeNode(node: DfDataNode | string): void : Programmatically removes a node by object or id and removes every connection that uses this node as a source or target.
• NgDrawFlowStoreService : Root-scoped facade for runtime state and controls—inject it anywhere to mirror component actions ( zoomIn , zoomOut , resetPosition , setPosition , setScale , removeConnection , removeNode ) and observe live data ( dataModel , scale , selectedNode , selectedConnection , signal event snapshots like lastNodeMoved and lastConnectionCreated , plus backward-compatible event streams like nodeMoved$ and connectionCreated$ ).