Connection Behaviours

Description

This example demonstrates how to apply different behaviors to different connections in the same Angular node editor. Not every edge in a product should behave the same way: some connections may snap aggressively, some may stay constrained, and some may need their own hover or rerouting rules.

This matters once your diagram is more than a visual demo. Workflow builders, logic editors, and domain-specific graph tools often need edge behavior that depends on the source node, target node, or the meaning of that connection.

Treating connection behavior as part of product logic usually gives a better result than trying to force every edge into one generic interaction model.

Example

What this solves

• Different interaction rules for different connection types.
• Cleaner UX for mixed diagrams with strict and flexible edges.
• A clearer path from generic diagrams to domain-specific editors.

Use this pattern when your graph UI needs more than a single default connection behavior.

Related docs

• Connection Component
• Snap Connection Component
• Connection Rules
• Connection Types Example