Installing the Library and Rendering Your First Flow

In this guide, you’ll learn how to set up Foblex Flow in your Angular project and render your first interactive flow — complete with draggable nodes and dynamic connections. Foblex Flow is a lightweight, flexible library for building flow-based UIs natively in Angular.

🚀 Installation

Foblex Flow provides a schematic for quick setup. Just run the following command in your Angular project to install and configure everything automatically:

🔧 Basic Flow Example

Here’s the most minimal working example — a canvas with two nodes and one connection between them:

🎨 Styling Basics

Foblex Flow doesn’t enforce any styling, giving you full design control. Here’s a sample style sheet to help you get started:

🔍 Explanation

• <f-flow> — the root component that manages the flow state.
• <f-canvas> — the layer where nodes and connections are placed.
• fNode — directive representing a node.
• fNodeOutput / fNodeInput — connectors for connections. fNodeOutput is the source, and fNodeInput is the target.
• <f-connection> — the component that renders a connection between two connectors by their fOutputId and fInputId.

⚠️ Note: fOutputId and fInputId may technically match, since they belong to different connector collections. However, this is not recommended, as future versions may unify these into a single fConnector directive where matching IDs would cause conflicts.

🧪 Try It Yourself

Enhance your flow with the following:

• Change the [fNodePosition] coordinates
• Add more fNode and f-connection elements
• Experiment with connection sides: fOutputConnectableSide, fInputConnectableSide
• Modify the connection type or behavior using the fType and fBehaviour inputs.
• fType: defines the visual style of the connection. Acceptable values from the EFConnectionType enum include: straight, bezier, segment. You can also pass a string for a custom connection type.

To create a custom connection type, see documentation here.

• fBehavior: defines the connection behavior, including positioning and flexibility. Acceptable values from EFConnectionBehavior include: fixed, fixed_center, floating. Default: EFConnectionBehavior.FIXED.

⚙️ Customization Notes

• Total freedom in node visuals — use any Angular component, not just <div>.
• Fully SSR-compatible, and works with Angular Signals and standalone components.
• You define the UI, the flow engine handles interactions.

🐞 Common Mistakes

• ❌ Forgot `[fNodePosition] → nodes will not render.
• ❌ fOutputId or `fInputId don’t match the ones set in connectors — connections won’t render.
• ❌ Placing elements outside <f-canvas> — fNode and <f-connection> must be within it.

🔍 Internals: How It Works

1. Each node is registered with its coordinates and metadata.
2. Connections reference nodes by their fOutputId and fInputId.
3. SVG lines are calculated between node anchors and rendered live.
4. On drag/move, connections automatically reflow and update visually.

🙌 Get Involved

If you find Foblex Flow useful — drop a ⭐ on GitHub, join the conversation, and help shape the roadmap!