Building AI Low-Code Platform in Angular — Part 2: Creating Your First Flow

Learn how to render a flow, create basic draggable nodes, and connect them. This is the foundation for your AI low-code platform.

In this article, we’ll build a minimal interactive flow with draggable nodes and dynamic connections using Foblex Flow.

View the source code on GitHub

🚀 Installation

To add Foblex Flow to your Angular project:

🔧 Creating a Basic Flow

Let’s create the smallest useful example: two nodes and one connection.

🎨 Styling

Foblex Flow does not ship default styles, so you fully control the look.

🔍 Explanation

• <f-flow>: root component that manages flow state.
• <f-canvas>: workspace where nodes and connections are rendered.
• fNode: directive that turns an element into a node.
• fNodeOutput / fNodeInput: source and target connectors.
• <f-connection>: renders a connection by fOutputId and fInputId.

Note: fOutputId and fInputId belong to different collections, so they may match technically, but it is better to keep them distinct.

🧪 Try This

• Change [fNodePosition] coordinates.
• Add extra fNode and f-connection elements.
• Experiment with connector sides: fOutputConnectableSide, fInputConnectableSide.
• Tune connection visuals with fType and behavior with fBehavior.

fType values: straight, bezier, segment (or custom string).
fBehavior values: fixed, fixed_center, floating (default: fixed).

⚙️ Customize It

• Use any Angular components inside fNode.
• Keep full control over styles and UI structure.
• Works with SSR, Standalone Components, Signals, and zoneless Angular.

🐞 Common Mistakes

• Missing [fNodePosition]: node is not rendered.
• Wrong fOutputId / fInputId: connection is not rendered.
• Components outside <f-canvas>: fNode and fConnection won’t work.

🔍 Under the Hood

1. All fNode elements are registered with positions.
2. fConnection resolves related connectors by IDs.
3. Connection points are calculated and an SVG path is drawn.
4. On node movement, paths are recalculated automatically.

⏭ What’s Next?

In the next part, we’ll create custom Angular node components and add palette-based drag-and-drop.

Official docs: flow.foblex.com

🙌 Thanks for Your Interest

If you like the project — leave a ⭐ on GitHub, join the discussions, and share your feedback!