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 go through the minimal setup needed to build an interactive flow with draggable nodes and dynamic connections — all using Foblex Flow, a native Angular library for visual interfaces.

🔧 View the source code on GitHub

🚀 Installation

To add Foblex Flow to your Angular project, simply use the schematics command, which will automatically install all dependencies and perform the initial setup:

ng add @foblex/flow 

🔧 Creating a Basic Flow

Let’s now create the simplest example — an interface with two nodes and a connection between their connectors. This is the minimal setup that’s ideal for getting started:

<f-flow fDraggable> <f-canvas> <f-connection fOutputId="output1" fInputId="input1"></f-connection> <div fNode fDragHandle fNodeOutput [fNodePosition]="{ x: 32, y: 32 }" fOutputId="output1" fOutputConnectableSide="right" > Node 1 </div> <div fNode fDragHandle fNodeInput [fNodePosition]="{ x: 240, y: 32 }" fInputId="input1" fInputConnectableSide="left" > Node 2 </div> </f-canvas> </f-flow> 

🎨 Styling

The library does not include any default styles, giving you full freedom in design. Below is a basic style set to get started quickly:

.f-flow { height: 400px; } .f-node { padding: 24px; color: rgba(60, 60, 67); text-align: center; background: #ffffff; border-radius: 2px; border: 0.2px solid rgba(60, 60, 67); &.f-selected { border-color: #3451b2; // Highlights the border when the node is selected // The f-selected class is automatically added by the library when a node or connection is selected. } } .f-drag-handle { cursor: move; } ::ng-deep { .f-connection { .f-connection-drag-handle { fill: transparent; // By default, this element has a black fill and is used to detect the start of dragging (e.g., onmousedown). // We make it transparent to avoid visual clutter, while keeping it functional. } .f-connection-selection { stroke-width: 10; // This is a pseudo-connection (a copy of the main path) used to make it easier to select the connection. // It's slightly thicker than the actual path (which is often only 1px), making it easier to interact with. // It remains invisible to avoid affecting visual clarity but stays active for user interaction. } .f-connection-path { stroke: rgba(60, 60, 67); stroke-width: 2; } &.f-selected { .f-connection-path { stroke: #3451b2; } } } } 

🔍 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 This

• 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.

⚙️ Customize It

• Full styling freedom — you decide how the nodes and UI will look.
• Any Angular components can be used inside fNode — not limited to divs.

📌 Supports SSR, Standalone Components, Signals, and Zoneless Angular.

🐞 Common Mistakes

• ❌ Missing [fNodePosition] — the node won’t appear on screen.
• ❌ fOutputId or fInputId don’t match the ones set in connectors — the connection won’t render.
• ❌ Components are placed outside <f-canvas> — fNode and <f-connection> must be within it.

🔍 Under the Hood

1. All fNode elements are registered and stored with their coordinates.
2. <f-connection> finds the correct fNodeOutput and fNodeInput by ID.
3. Connection points are calculated and an SVG line is drawn.
4. When nodes are moved, connections update automatically.

⏭ What’s Next?

In the next article:

• We’ll create custom Angular components as nodes
• Add drag and drop events

📘 Jump To Series

✅ Part 1: Introduction to Foblex Flow
✅ Part 2: Creating Your First Node Flow (you are here)
🔄 Part 3: Creating Custom Nodes and a Node Palette (coming soon)

👉 In the meantime, explore the official documentation: flow.foblex.com