Output

Selector: [fNodeOutput]
Class: FNodeOutputDirective

FNodeOutputDirective marks an element inside a node as an output connector - a place where users can start creating outgoing connections.

Outputs must live inside a node ([fNode]) which is rendered inside f-canvas and f-flow.
In most editors, outputs represent ports: “this node can send data/control flow to something else”.

Quick start

A node with an output connector

You can place fNodeOutput on a dedicated element inside the node (classic “port”), or directly on the node host element (simple “whole-node output”).

Output as a port element (recommended for multi-port nodes)

Output on the node host (recommended for simple nodes)

Notes

• Putting fNodeOutput on the node host is great when you want one output for the whole node.
• For nodes with multiple outputs, prefer separate port elements - it’s clearer for UX and keeps ids/rules per port.
• Don’t confuse this with dropping a connection onto a node (fConnectOnNode) - that one affects where you can drop a connection, not where you start it.

Connect it using f-connection

A persisted connection references the output and input by their ids:

Tip: use stable ids (from your data model) if you want selection/state to survive rerenders and persistence.

How it works

• The output connector registers itself in the internal store (together with its parent node).
• During interaction (create/reassign connection), the library uses output metadata (disabled/multiple/self-connect rules) to decide whether a target is valid.
• The connector also updates CSS state classes so you can style “connected / disabled / not connectable” states.

API

Inputs

• fOutputId: string; Output identifier. Default: f-node-output-${uniqueId++}.
• fOutputMultiple: boolean; Default: false. Allows multiple outgoing connections.
• fOutputDisabled: boolean; Default: false. Disables connection from this output.
• fOutputConnectableSide: EFConnectableSide; Default: AUTO. Preferred side for outgoing connection.
• isSelfConnectable: boolean; Default: true. Allows connecting to inputs on the same node.
• fCanBeConnectedInputs: string[]; List of allowed input IDs or categories.

Outputs

• No direct outputs.

Methods

• No public template API methods.

Types

EFConnectableSide

Styling

• .f-component Base class for flow primitives.
• .f-node-output Output host class.
• .f-node-output-multiple Applied when fOutputMultiple = true.
• .f-node-output-disabled Applied when fOutputDisabled = true.
• .f-node-output-self-connectable Applied when isSelfConnectable = true.
• .f-node-output-connected Applied when the output currently has one or more connections.
• .f-node-output-not-connectable Applied when creating a connection from this output is currently blocked.

Notes and pitfalls

• fOutputId must match connection fOutputId values exactly. A typo silently results in “no connection rendered”.
• If fOutputMultiple = false, the output may become unavailable after the first active connection — that’s expected for “single port” UX.
• Restrictions like fCanBeConnectedInputs are easy to misconfigure. If you rely on rules heavily, validate ids/categories in your own data model so you can show user-friendly errors.

Example

Connectors inside node

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectors/connector-inside-node/connector-inside-node.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectors/connector-inside-node/connector-inside-node.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectors/connector-inside-node/connector-inside-node.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss

Connectable side (using fOutputConnectableSide)

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectors/connectable-side/connectable-side.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectors/connectable-side/connectable-side.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectors/connectable-side/connectable-side.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss