Creating Nodes

In ng-draw-flow, nodes can be customized to look and function just how you want them to. To create your own node, you should develop a component that extends from the DrawFlowBaseNode class. This component can render connector components such as DfInputComponent and DfOutputComponent .

Here is what the DrawFlowBaseNode class entails:

    
      
    

      
        Copy
      
      
    
  

The base class uses signal queries viewChildren() for DfInputComponent and DfOutputComponent . These signals keep the node aware of existing connectors and detect changes in their count, which is essential for maintaining the flow's data integrity and interaction logic.

The nodeId provides a unique identifier for each node while model holds the necessary data for the node's functionality.

For backward compatibility these values are also available as plain properties on the base class. If you want to work with Angular signals directly, use nodeIdSignal() , modelSignal() , startNodeSignal() , endNodeSignal() , selectedSignal() and invalidSignal() in your custom nodes.

The selected attribute is still passed to the node content for custom behavior, while the default wrapper selection styles are handled by NodeComponent and configured with CSS variables.

The optional startNode and endNode inputs determine the node's ability to connect with others, defining its role within the flow as either the initiation or termination point.

Here is a basic blueprint for a simple node component: