NgDiagramComponent
Diagram component
Implements
Section titled “Implements”OnInitOnDestroy
Properties
Section titled “Properties”clipboardPasted
Section titled “clipboardPasted”clipboardPasted:
EventEmitter<ClipboardPastedEvent>
Event emitted when clipboard content is pasted into the diagram.
This event fires when nodes and edges are added via paste operations, either through keyboard shortcuts or programmatic paste commands.
config
Section titled “config”config:
InputSignal<undefined|DeepPartial<FlowConfig>>
Global configuration options for the diagram.
diagramInit
Section titled “diagramInit”diagramInit:
EventEmitter<DiagramInitEvent>
Event emitted when the diagram initialization is complete.
This event fires after all nodes and edges including their internal parts (ports, labels) have been measured and positioned.
edgeDrawn
Section titled “edgeDrawn”edgeDrawn:
EventEmitter<EdgeDrawnEvent>
Event emitted when a user manually draws an edge between two nodes.
This event only fires for user-initiated edge creation through the UI, but not for programmatically added edges.
edgeTemplateMap
Section titled “edgeTemplateMap”edgeTemplateMap:
InputSignal<NgDiagramEdgeTemplateMap>
The edge template map to use for the diagram. Optional - if not provided, default edge rendering will be used.
groupMembershipChanged
Section titled “groupMembershipChanged”groupMembershipChanged:
EventEmitter<GroupMembershipChangedEvent>
Event emitted when nodes are grouped or ungrouped.
This event fires when the user moves nodes in or out of a group node, changing their group membership status.
middlewares
Section titled “middlewares”middlewares:
InputSignal<MiddlewareChain>
Optional — the initial middlewares to use. When provided, the middleware list can be modified to add new items, replace existing ones, or override the defaults.
⚠️ Use with caution — incorrectly implemented custom middlewares can degrade performance or completely break the data flow.
model:
InputSignal<ModelAdapter>
The model to use in the diagram.
nodeResized
Section titled “nodeResized”nodeResized:
EventEmitter<NodeResizedEvent>
Event emitted when a node or group size changes.
This event fires when a node is resized manually by dragging resize handles or programmatically using resize methods.
nodeTemplateMap
Section titled “nodeTemplateMap”nodeTemplateMap:
InputSignal<NgDiagramNodeTemplateMap>
The node template map to use for the diagram.
paletteItemDropped
Section titled “paletteItemDropped”paletteItemDropped:
EventEmitter<PaletteItemDroppedEvent>
Event emitted when a palette item is dropped onto the diagram.
This event fires when users drag items from the palette and drop them onto the canvas to create new nodes.
selectionChanged
Section titled “selectionChanged”selectionChanged:
EventEmitter<SelectionChangedEvent>
Event emitted when the selection state changes in the diagram.
This event fires when the user selects or deselects nodes and edges through
clicking or programmatically using the NgDiagramSelectionService.
selectionMoved
Section titled “selectionMoved”selectionMoved:
EventEmitter<SelectionMovedEvent>
Event emitted when selected nodes are moved within the diagram.
This event fires when the user moves nodes manually by dragging or
programmatically using the NgDiagramNodeService.moveNodesBy() method.
selectionRemoved
Section titled “selectionRemoved”selectionRemoved:
EventEmitter<SelectionRemovedEvent>
Event emitted when selected elements are deleted from the diagram.
This event fires when the user deletes nodes and edges using the delete key, or programmatically through the diagram service.
selectionRotated
Section titled “selectionRotated”selectionRotated:
EventEmitter<SelectionRotatedEvent>
Event emitted when a node is rotated in the diagram.
This event fires when the user rotates a node manually using the rotation handle
or programmatically using the NgDiagramNodeService rotation methods.
viewportChanged
Section titled “viewportChanged”viewportChanged:
EventEmitter<ViewportChangedEvent>
Event emitted when the viewport changes through panning or zooming.
This event fires during pan and zoom operations, including mouse wheel zoom, and programmatic viewport changes.
Methods
Section titled “Methods”getNodeTemplate()
Section titled “getNodeTemplate()”getNodeTemplate(
nodeType):null|Type$1<NgDiagramNodeTemplate<any,SimpleNode<any>>> |Type$1<NgDiagramGroupNodeTemplate<any>>
Retrieves the custom Angular component template for rendering a specific node type.
This method performs a lookup in the node template map to find a custom component for the given node type. If no custom template is registered, it returns null, which will cause the diagram to fall back to the default node template.
Parameters
Section titled “Parameters”nodeType
Section titled “nodeType”The type identifier of the node to get a template for.
undefined | string
Returns
Section titled “Returns”null | Type$1<NgDiagramNodeTemplate<any, SimpleNode<any>>> | Type$1<NgDiagramGroupNodeTemplate<any>>
The Angular component class registered for the node type, or null if no custom template is registered for this type
Example
Section titled “Example”Basic usage in template:
// In your componentconst nodeTemplates = new Map([ ['database', DatabaseNodeComponent], ['api', ApiNodeComponent]]);
// The method will return DatabaseNodeComponent for database nodesconst dbTemplate = this.getNodeTemplate('database'); // Returns DatabaseNodeComponent- nodeTemplateMap - The input property where templates are registered
- NgDiagramNodeTemplateMap - Type definition for the template map
Throws
Section titled “Throws”This method does not throw exceptions - it handles all edge cases gracefully