Siarhei Huzarevich

Posted on Jun 24 • Originally published at Medium

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

#angular #webdev #lowcode #opensource

📚 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 <f-connection> must be within it.

🔍 Under the Hood

All fNode elements are registered and stored with their coordinates.
<f-connection> 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 LowCode Platform(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

DEV Community