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

Workbench inputs

Pass definition for every mode and snapshot when execution state is available. Use mode, paletteItems, detailsKind, detailsPosition, selection, and viewport to control the shell.

  • mode: create, edit, view, inspect, or live.
  • detailsKind: auto, node-properties, execution, or none.
  • paletteItems: default node catalog rendered by tng-flow-node-palette.
  • paletteOpen and detailsOpen: controlled panel visibility for API-driven toolbars.
  • showPaletteToggle and showDetailsToggle: hide the built-in panel buttons when an application renders its own controls.
  • canvasMode: optional low-level override for the underlying graph mode.

Workbench outputs

The workbench forwards controlled graph events for nodes, connections, selection, viewport, and command requests. It also emits paletteOpenChange, detailsOpenChange, and execution activation events from graph or history interactions.

Template hooks

Use ng-template[tngFlowWorkbenchPalette] to replace the left panel and ng-template[tngFlowWorkbenchDetails] to replace the details panel. Existing execution payload, execution inspector, node properties data, node, and connection templates continue to work inside the composed shell.