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 tutorial gives you the first working editor surface that later evolves into a richer Angular workflow builder.

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

Version note: The linked repository preserves the original v18 implementation. The examples below use the unified connector API introduced in v19.

🚀 Installation

To add Foblex Flow to your Angular project:

For Nx workspaces:

If you prefer manual installation, install the required companion packages explicitly:

🔧 Creating a Basic Flow

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

🎨 Styling

ng add @foblex/flow connects the shipped default theme automatically. You can keep it, override it with application styles like these, or configure the theme manually when installing the package without the schematic.

🔍 Explanation

• <f-flow>: root component that hosts editor interaction and runtime UI state.
• <f-canvas>: workspace where nodes and connections are rendered.
• fNode: directive that turns an element into a node.
• fConnector: unified connector directive; fConnectorType selects the source or target role.
• <f-connection>: renders a connection whose fSourceId and fTargetId match connector IDs.

Unified fConnectorId values share one registry, so each connector needs a unique ID.

🧪 Try This

• Change [fNodePosition] coordinates.
• Add extra fNode and f-connection elements.
• Experiment with connector sides using fConnectorConnectableSide.
• 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]: nodes start at the default origin and can overlap.
• A mismatched fSourceId / fTargetId and fConnectorId: 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 source and target connectors by their unified 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!