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

Updated for Foblex Flow v19.1.6 (July 2026). The examples now use the unified fConnector API shipped in v19.

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.

🔧 Historical tutorial source — Foblex Flow 17.5.2

🔧 Explore the full application

The linked tutorial repository is the historical 17.5.2 implementation. The snippets below are updated for 19.1.6. For maintained v19 code, use the AI Low-Code Platform example.

🚀 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 fSourceId="output1" fTargetId="input1"></f-connection>

    <div
      fNode
      fDragHandle
      fConnector
      fConnectorType="source"
      fConnectorId="output1"
      fConnectorConnectableSide="right"
      [fConnectorMultiple]="false"
      [fNodePosition]="{ x: 32, y: 32 }"
    >
      Node 1
    </div>

    <div
      fNode
      fDragHandle
      fConnector
      fConnectorType="target"
      fConnectorId="input1"
      fConnectorConnectableSide="left"
      [fNodePosition]="{ x: 240, y: 32 }"
    >
      Node 2
    </div>
  </f-canvas>
</f-flow>

🎨 Styling

ng add @foblex/flow wires the default theme into your Angular workspace. You can keep it, override it, or replace it with your own styles. Below is a basic custom style set:

.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 flow host. In classic mode your application owns graph records; managed state is available separately through provideFFlow(withFlowState()).
• <f-canvas> — the layer where nodes and connections are placed.
• fNode — directive representing a node.
• fConnector — the unified connector directive. Set fConnectorType="source", "target", or "source-target", and give it a unique fConnectorId.
• <f-connection> — renders a connection whose fSourceId and fTargetId reference connector IDs.

⚠️ Note: unified connectors share one ID registry, so connector IDs must be unique within a flow. The legacy fNodeOutput and fNodeInput directives remain available in v19 but are deprecated.

🧪 Try This

• Change the [fNodePosition] coordinates
• Add more fNode and <f-connection> elements
• Experiment with connection sides using fConnectorConnectableSide
• Modify the connection type or behavior using the fType and fBehavior inputs.
• fType: defines the visual style of the connection. Acceptable values from the EFConnectionType enum include: straight, bezier, segment, adaptive-curve. 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] leaves the node at the default { x: 0, y: 0 }, so multiple nodes can overlap. Bind a real point object.
• ❌ fSourceId or fTargetId does not exactly match a rendered fConnectorId — 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> resolves the source and target fConnector directives 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