Foblex Flow
Introduction
Getting Started
Containers
Flow Canvas
Node
Node Drag Handle
Connectors
Output Input Outlet
Connection
Connection Create Connection Connection Marker
Extends
Drag and Drop Zoom Background Line Alignment Minimap
Layouts & Behaviors
Dagre Tree ELKJS Tree
Pro Examples
Visual Programming Flow DB Management Flow Call Center Flow Scheme Editor
Foblex Flow
v12.6.4

Create Connection

Selector: f-connection-for-create

It is used to create a connection between two nodes. The connection can be dragged to a different node input.

Inputs

Usage

Add the f-connection-for-create component to the f-canvas. Works only if fDraggableDirective is added.

<f-flow |:|fDraggable|:|>
  <f-canvas>
    |:|<f-connection-for-create></f-connection-for-create>|:|
  </f-canvas>
</f-flow>

Examples

The following example shows how to create a connection between two nodes.

drag me
to me

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-to-connect/drag-to-connect.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-to-connect/drag-to-connect.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-to-connect/drag-to-connect.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss