/

Connectors

Connectors play a pivotal role in defining the interactions within a node-based flow architecture. They form the interactive endpoints for establishing relationships between different nodes in the system.

Input Connectors (df-input)

To ensure the correct functioning and tracking of connections, input connectors require specific parameters to be passed via the [connectorData] parameter. These parameters include nodeId and connectorId .

nodeId is the unique identifier of the node, while connectorId uniquely identifies the connector within that node. The single parameter dictates whether the input connector can accept multiple connections or just one. If single is set to true , it means that once a connection is made to this input connector, no additional connections will be accepted.

Output Connectors (df-output)

Similarly, output connectors are the points from which connections originate to other node's input connectors. Much like input connectors, output connectors also require the nodeId and connectorId parameters for identification and functionality purposes. The single parameter, when set to true for an output connector, restricts it to create only one connection to another node, ensuring a one-to-one relationship.

Customizing Connectors

Input and output connectors ship with distinct default colors so that their roles are visually apparent at a glance. You can override these defaults—or any other visual treatment—to align with your own design system. Color customization is achieved by altering CSS custom properties:

  • --df-connector-color : This property controls the default color of the connectors. By setting this variable, you can ensure that all connectors in your application adhere to a consistent color scheme that matches your branding or design specifications.
  • --df-connector-input-color and --df-connector-output-color : These properties let you independently tailor the default colors of input and output connectors. By default, NgDrawFlow differentiates them to make the direction of data flow obvious, but you can swap or restyle the palette as needed.
  • --df-connector-color-hover : When a user hovers over a connector, this property determines the color that the connector will change to. This interactive feedback is important for user experience, making it clear which connector is currently under consideration for connection creation.
  • --df-connector-input-color-hover and --df-connector-output-color-hover : Define the hover feedback for each connector type individually so that directional cues remain clear even during interaction.

Connector Positions

The position input param specifies where connectors appear on a node: DfConnectorPosition.Top , DfConnectorPosition.Right , DfConnectorPosition.Bottom , or DfConnectorPosition.Left .

For information on adjusting connection curvature and line styles, refer to the connections documentation .