NgDiagramComponent
Diagram component
Implements
Section titled “Implements”OnInitOnDestroy
Properties
Section titled “Properties”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 is initialized and all nodes and edges including their internal parts are measured
edgeDrawn
Section titled “edgeDrawn”edgeDrawn:
EventEmitter<EdgeDrawnEvent>
Event emitted when a user manually draws an edge between two nodes
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.
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.
nodeTemplateMap
Section titled “nodeTemplateMap”nodeTemplateMap:
InputSignal<NgDiagramNodeTemplateMap>
The node template map to use for the diagram.
selectionChanged
Section titled “selectionChanged”selectionChanged:
EventEmitter<SelectionChangedEvent>
Event emitted when selection changes
selectionMoved
Section titled “selectionMoved”selectionMoved:
EventEmitter<SelectionMovedEvent>
Event emitted when selected nodes are moved
viewportChanged
Section titled “viewportChanged”viewportChanged:
EventEmitter<ViewportChangedEvent>
Event emitted when viewport changes (pan/zoom)
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