Installing and Rendering Your First Flow

Build your first interactive diagram in Angular: install Foblex Flow, render two draggable nodes, and connect them with a live connection.

This is the default starting path for most Angular teams. You do not need caching or virtualization on day one.

Prefer trying without a local setup? Open the minimal starter on StackBlitz — a running editor with two nodes and connection creation.

Description

This guide is the shortest path from installation to a working flow. You will:

add or update the library in your Angular app,
render a minimal flow (f-flow + f-canvas),
place nodes with explicit positions,
connect them with f-connection,
apply small baseline styles you can reuse.

Install

This guide targets the 19.x API line. If your application is on Angular 12-17.2, start with Angular Version Compatibility and pin the matching Foblex Flow line before you run ng add or npm install.

ng add also connects the shipped default theme automatically by adding node_modules/@foblex/flow/styles/default.scss to application styles when the entry is missing.

If you want manual or selective theme setup, continue with Default Theme and Styling.

Why / when to use this

Start here if you are:

evaluating Foblex Flow in an existing Angular application,
bootstrapping a workflow / node editor screen,
building internal tools with draggable, connected nodes,
creating the base layout before adding selection, minimap, alignment, and spacing helpers.
validating whether Foblex Flow fits your Angular stack before adding optional advanced modules.

Minimal flow template

A minimal interactive flow consists of:

f-flow — the root container.
fDraggable — enables interaction (drag, pointer handling, editor UX pipeline).
f-canvas — the layer where nodes and connections are rendered.
Nodes with fNode and explicit positions via fNodePosition.
Unified connectors (fConnector) + f-connection whose fSourceId and fTargetId reference matching fConnectorId values.

Import FFlowModule for the complete template above. f-flow and f-canvas are standalone components, but the sample also uses non-standalone directives and components that the module registers:

Choose a state mode

The template above works with either state integration:

Classic mode (default): your component owns node, group, and connection records. Handle final interaction events such as fCreateConnection and fMoveNodes, validate them, and update your Angular state.
Managed mode (opt-in): install provideFFlow(withFlowState()), load typed records into FFlowState, and render its signals. Supported gestures update those records and history automatically, with snapshots and undo/redo included.

In both modes your application defines domain fields, validation rules, permissions, and persistence. See the Managed Flow State guide when you want the opt-in store.

Default theme

The quickest styling path is to keep the shipped theme connected.

If you installed the package manually, add one of these:

Then only add layout styles that belong to your screen:

For selective mixins and token overrides, see Default Theme and Styling.

Manual styling baseline

Foblex Flow is intentionally UI-agnostic: it does not enforce a design system.
Use this as a practical baseline, then adapt it to your app styles.

Explanation

f-flow — root container that provides flow context.
f-canvas — viewport/rendering layer for nodes and connections.
fNode — directive that turns an element into a node.
fConnector — unified source, target, source-target, or outlet endpoint. Use it for new code.
f-connection — renders a connection whose fSourceId and fTargetId match rendered fConnectorId values.

Try it yourself

After you get the minimal template working, try:

moving nodes by changing [fNodePosition],
adding more nodes and connections,
experimenting with connector sides (fConnectorConnectableSide),
changing the connection look/behavior via fType and fBehavior,
enabling additional UX helpers (selection area, minimap, alignment and spacing).

Only add scaling features such as cache or virtualization once you actually need them for larger scenes.

Notes / pitfalls

Nodes and connections must be inside f-canvas. Elements outside it will not participate in transform and interaction.
Nested control flow (@for inside @if, @for inside @for) is not projected into the canvas — content renders detached and invisible without errors. Wrap the block with <ng-container ngProjectAs="[fNodes]"> (groups: "[fGroups]", connections: "[fConnections]"). See Errors and Warnings (FF1004).
fSourceId and fTargetId must match rendered fConnectorId values exactly — otherwise the connection will not render.
Always define initial node positions for predictable layout.
Keep ids stable across re-renders if your app persists or recalculates the graph.
Older fNodeOutput / fNodeInput and fOutputId / fInputId APIs remain as deprecated compatibility aliases. Do not use them in new code; follow Migrating to Unified Connectors when updating an existing editor.

For custom connection types, see the Examples section: /examples/custom-connection-type.

Next steps

Continue with the API references:

Example

Support Foblex Flow

If this page helped you build something (or saved you from writing drag+drop and SVG connection logic from scratch), please ⭐ the repo on GitHub — it directly helps the project grow.