Custom Nodes

Description

This guide shows how to create custom nodes for flow components with different content, styles, and behaviors. You can render any Angular UI inside a node: forms, buttons, metrics, menus, or domain-specific panels.

In practice, custom nodes are one of the biggest reasons teams adopt Foblex Flow instead of a generic diagram widget. Your node can look like a real product component while still participating in drag, selection, and connection logic.

Example

This example uses Angular Material components to fill the custom nodes with content.

What this solves

• Build branded nodes instead of plain boxes.
• Mix graph interactions with real Angular UI.
• Reuse the same editor primitives across workflow, AI, CRM, or internal-tool use cases.

When to use it

Start from this example whenever the visual identity of a node matters as much as the graph behavior around it.

Related docs

• Node Directive
• Drag Handle
• Angular Node Editor Library