Configuration & Public API

Configure each editor with Angular providers, bind its graph through a form control and use either the component reference or the store facade for commands.

Core providerNode registry, connection rendering and interaction constraints.

Camera providerInitial framing, zoom limits and wheel behavior.

Public controlsCamera, model, selection and deletion commands.

Core Configuration

Call provideNgDrawFlowConfigs() in application-level providers for shared defaults or in component providers when editors need independent node registries and behavior.

graph-editor.component.ts

    
      providers: [
  provideNgDrawFlowConfigs({
    nodes: {
      task: TaskNodeComponent,
      decision: DecisionNodeComponent,
    },
    connection: {
      type: DfConnectionType.SmoothStep,
      curvature: 16,
      arrowhead: {type: DfArrowhead.ArrowClosed, width: 12, height: 8},
    },
    options: {
      nodeDragThreshold: 1,
      nodesDraggable: true,
      nodesDeletable: true,
      connectionsCreatable: true,
      connectionsDeletable: true,
    },
  }),
];

Option	Default	Behavior
`connection.type`	`Bezier`	Uses Bezier curves or orthogonal `SmoothStep` paths.
`connection.curvature`	`0.25`	Bezier bend coefficient or SmoothStep corner radius in pixels.
`connection.arrowhead`	`None` , 8 x 4	Arrow shape, width and height at the target connector.
`options.nodeDragThreshold`	`1`	Pointer travel in pixels before a node drag begins.
`options.nodesDraggable`	`true`	Allows users to move nodes.
`options.nodesDeletable`	`true`	Allows selected nodes to be deleted from the UI.
`options.connectionsCreatable`	`true`	Allows regular outputs to start draggable connections.
`options.connectionsDeletable`	`true`	Allows selected connections to be deleted from the UI.
`positionAnimation.duration`	`0`	Animation duration for externally changed node coordinates.
`positionAnimation.easing`	`ease-in-out`	Uses `ease-in-out` or `linear` interpolation.

Node Wrapper Styling

Override node CSS variables on ng-draw-flow . Set className on a node to target one node or a domain-specific group without coupling wrapper styles to the custom component markup.

styles.less

    
      ng-draw-flow {
  --df-node-background: #fff;
  --df-node-color: #111;
  --df-node-padding: 0.75rem 1rem;
  --df-node-border: 0.0625rem solid #d0d2ce;
  --df-node-border-radius: 0.5rem;
  --df-node-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
  --df-node-box-shadow-hover: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.12);
  --df-node-selected-border-color: #156ed4;
  --df-node-invalid-border-color: #f04438;
}

.warning-node {
  --df-node-background: #fff7ed;
  --df-node-border-color: #f97316;
}

Position Animation

Position animation is opt-in and applies whenever a new model changes node coordinates, including layouts and application-side alignment. A duration of 0 preserves immediate updates.

graph-editor.component.ts

    
      provideNgDrawFlowConfigs({
  positionAnimation: {
    duration: 280,
    easing: 'ease-in-out',
  },
});

Component Methods

Call these methods through a viewChild(NgDrawFlowComponent) . The same graph and camera commands, except clearSelection() , are available through NgDrawFlowStoreService .

Method	Behavior
`zoomIn()` / `zoomOut()`	Changes zoom by the configured `zoomStep` .
`resetPosition()`	Restores zoom and reframes content with current left/top placement options.
`setPosition({x?, y?, zoom?})`	Partially updates camera coordinates or zoom; omitted fields keep their values.
`setScale(scale)`	Sets an absolute zoom factor and clamps it to `minZoom` / `maxZoom` .
`setDataModel(model)`	Replaces the model and propagates it to the bound form control.
`removeNode(node \| id)`	Removes a node and every connection that references it.
`removeConnection(connection)`	Removes the edge with matching source and target endpoints.
`clearSelection()`	Clears the selected node or connection without changing the graph.

Camera commands accept scale factors where 1 is 100%. Scale outputs and store snapshots expose percentages where 100 is actual size.

Component outputs, store signals and RxJS streams are covered in the state and events guide . Camera options are listed in the pan and zoom guide .

NgDrawFlow