Design Node-Based Interfaces in Angular — A Beginner’s Guide with Foblex Flow

4 min read2 days ago

> 📚 This is Part 2 of the Foblex Flow tutorial series.
> Read Part 1 — Introduction to Foblex Flow

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.

🚀 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 fConnection must be within it.

🔍 Under the Hood

All fNode elements are registered and stored with their coordinates.
fConnection finds the correct fNodeOutput and fNodeInput by ID.
Connection points are calculated and an SVG line is drawn.
When nodes are moved, connections update automatically.

⏭ What’s Next?

In the next article:

Part 3 —Extending Your Flow: Custom Nodes and the Beginning of an AI Builder(coming soon)

We’ll create custom Angular components as nodes
Add drag and drop events
Enable snapping and connection dragging

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

Thank you for being a part of the community

Before you go:

Be sure to clap and follow the writer ️👏️️
Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Twitch
Start your own free AI-powered blog on Differ 🚀
Join our content creators community on Discord 🧑🏻‍💻
For more content, visit plainenglish.io + stackademic.com

JavaScript in Plain English