Getting StartedInstallation and setup guides 6
FormInput and selection components 27
FlowWorkflow graph and execution surfaces 4
LayoutStructural layout components 9
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Flow Execution Graph API

Import TngFlowExecutionGraphComponent from @tailng-ui/flow/execution. The graph is a controlled execution-aware facade over Flow Editor: pass a workflow definition and run snapshot, then persist emitted selection, viewport, and edit requests in application state.

Graph inputs

definition supplies the workflow topology and snapshot supplies runtime execution state. Selection, inspection, selected execution, and viewport are controlled inputs so dashboards can synchronize the graph with inspectors, history panels, and URL state.

NameTypeDefaultDescription
definitionTngFlowDefinition<TNodeData, TConnectionData> | nullnullWorkflow nodes, connections, ports, labels, positions, and routing metadata.
snapshotTngFlowRunExecutionSnapshot<TPayload> | nullnullRun, node, and connection executions used to derive graph status presentation.
selectionTngFlowSelectionEMPTY_TNG_FLOW_SELECTIONControlled node and connection selection.
inspectedNodeIdstring | nullnullNode id used by details panels and execution selection resolution.
selectedExecutionIdstring | nullnullSelected execution for the inspected node.
viewportTngFlowViewport | nullnullOptional externally supplied canvas position and scale.
mode'edit' | 'inspect' | 'readonly''inspect'Controls graph editing, selection, and activation behavior.
flowIdstring'tng-flow-execution-graph'Stable underlying flow instance id. Use a unique value for multiple graphs.
ariaLabelstring'Workflow execution graph'Accessible name for the graph surface.

Controlled execution graph

html
<tng-flow-execution-graph
  [definition]="definition()"
  [snapshot]="snapshot()"
  [selection]="selection()"
  [inspectedNodeId]="inspectedNodeId()"
  [selectedExecutionId]="selectedExecutionId()"
  [viewport]="viewport()"
  (selectionChange)="selection.set($event)"
  (inspectedNodeIdChange)="inspectedNodeId.set($event)"
  (selectedExecutionIdChange)="selectedExecutionId.set($event)"
  (viewportChange)="viewport.set($event)"
  (executionActivated)="lastActivation.set($event)"
/>

Editor options

Execution Graph forwards editor configuration to the underlying Flow Editor. Use these inputs for authoring mode, minimap, command shortcuts, connection routing, keyboard movement, and smart guides without dropping down to the editor component directly.

GroupInputsPurpose
Surface togglesshowControls, showConnectionTools, showBackground, showMinimap, showSelectionArea, fitOnInit, fitOnDefinitionChangeShows or hides built-in canvas features and controls initial viewport fitting.
Connection behaviorattachmentLayout, connectionValidator, options, connectionOptions, connectionCreationPathType, connectionAriaLabel Configures port strategy, validation, routing defaults, live preview path type, and accessible connection names.
Keyboard and commandskeyboardOptions, commandShortcuts, canUndo, canRedoConfigures keyboard movement, shortcut interception, and command toolbar state.
Layout assistancesmartGuides, snapToGrid, gridSize, minimapOptionsControls alignment guides, snapped movement, grid scale, and minimap behavior.
Context menucontextMenuEnabledReplaces the native graph context menu with controlled context-menu events.

Graph outputs

Outputs are proposals or synchronized state changes. The graph does not mutate definition, selection, or viewport internally.

GroupOutputsUse
Controlled stateselectionChange, inspectedNodeIdChange, selectedExecutionIdChange, viewportChangePersist graph state and synchronize external inspectors or history views.
Execution activationexecutionActivated Emits the activated node and selected execution with source 'graph'.
Node editingnodesMoved, nodePositionChange, nodeCreateRequested, nodesDeleteRequested Apply node position, creation, and deletion requests to a new definition snapshot.
Connection editingconnectionCreateRequested, connectionReconnectRequested, connectionRoutingChangeRequested, connectionWaypointsChange, connectionsDeleteRequested, connectionRejectedCreate, reconnect, restyle, adjust, delete, or report rejected connections.
Commands and menuscommandRequested, contextMenuRequestedIntegrate graph shortcuts, toolbar actions, and custom context menus.

Controlled authoring

In edit mode, apply movement, creation, reconnect, routing, waypoint, and deletion events to a new controlled definition. For attachmentLayout="custom-points", persist generated endpoint ports with ensureTngFlowCustomPointPorts() and clean unused endpoints after deletion with pruneUnusedTngFlowCustomPointPorts().

Editable execution graph

html
<tng-flow-execution-graph
  mode="edit"
  attachmentLayout="custom-points"
  [definition]="definition()"
  [snapshot]="snapshot()"
  [selection]="selection()"
  [commandShortcuts]="['undo', 'redo']"
  [canUndo]="historyStatus().canUndo"
  [canRedo]="historyStatus().canRedo"
  (nodesMoved)="applyNodePositions($event)"
  (connectionCreateRequested)="createConnection($event)"
  (connectionReconnectRequested)="reconnectConnection($event)"
  (connectionRoutingChangeRequested)="updateConnectionRouting($event)"
  (connectionsDeleteRequested)="deleteConnections($event)"
  (nodesDeleteRequested)="deleteNodes($event)"
  (commandRequested)="runGraphCommand($event)"
/>

Accepting a connection request

ts
import {
  ensureTngFlowCustomPointPorts,
  type TngFlowConnectionCreateRequest,
} from '@tailng-ui/flow';

protected createConnection(request: TngFlowConnectionCreateRequest): void {
  const definition = this.definition();
  const id = this.nextConnectionId();
  const nodes = ensureTngFlowCustomPointPorts(definition.nodes, [
    request.source,
    request.target,
  ]);

  this.definition.set({
    ...definition,
    nodes,
    connections: [
      ...definition.connections,
      {
        id,
        source: request.source,
        target: request.target,
        routing: request.routing ?? { type: 'bezier' },
      },
    ],
  });
}

Template hooks

Execution Graph projects ng-template[tngFlowNode], ng-template[tngFlowConnection], and ng-template[tngFlowConnectionLabel] into the underlying editor. The template context is the same as Flow Editor, with execution presentation already merged into the provided view state.

Execution-aware templates

html
<tng-flow-execution-graph [definition]="definition()" [snapshot]="snapshot()">
  <ng-template tngFlowNode="task" let-node let-view="view">
    <article class="task-node" [attr.data-phase]="view.status">
      <strong>{{ node.name }}</strong>
      <small>{{ view.status ?? 'pending' }}</small>
    </article>
  </ng-template>

  <ng-template tngFlowConnection let-connection let-view="view">
    <span class="connection-label">
      {{ connection.label ?? view.status ?? 'edge' }}
    </span>
  </ng-template>
</tng-flow-execution-graph>

Imperative helpers

Export the component as tngFlowExecutionGraph or query it with ViewChild when parent tools need to drive viewport or routing behavior from outside the graph.

MethodSignatureDescription
refreshLayout() => voidRecomputes editor geometry after external layout changes.
fitToScreen(animated?: boolean, padding?: number) => voidFits graph content into the visible viewport.
resetViewport(animated?: boolean) => voidRestores the default viewport.
centerNode(nodeId: string, animated?: boolean) => booleanCenters a node and reports whether the node was found.
requestNodeCreate(item: TngFlowPaletteItem<TNodeData>, position?: TngFlowPoint) => voidStarts the same controlled node-create flow used by palette interactions.
requestConnectionRoutingChange(type: TngFlowConnectionPathType) => booleanRequests a routing style update for selected existing connections.

Calling graph helpers

ts
@ViewChild(TngFlowExecutionGraphComponent)
private readonly graph?: TngFlowExecutionGraphComponent;

protected focusFailedNode(nodeId: string): void {
  this.graph?.centerNode(nodeId);
}

protected useOrthogonalRouting(): void {
  this.graph?.requestConnectionRoutingChange('orthogonal');
}