NgDiagramService

The NgDiagramService provides advanced access to the diagram’s core API, including configuration, layout, event management, routing, transactions, and more.

Example usage

private ngDiagramService = inject(NgDiagramService);

// Check if diagram is initialized
const ready = this.ngDiagramService.isInitialized();

// Update configuration
this.ngDiagramService.updateConfig({ gridSize: 20 });

Extends

• NgDiagramBaseService

Properties

isInitialized

isInitialized: Signal<boolean>

Returns whether the diagram is initialized.

Methods

addEventListener()

addEventListener<K>(event, callback): UnsubscribeFn

Add an event listener for a diagram event.

Type Parameters

K

K extends keyof DiagramEventMap

Parameters

event

K

The event name.

callback

EventListener<DiagramEventMap[K]>

The callback to invoke when the event is emitted.

Returns

UnsubscribeFn

A function to unsubscribe.

Example

const unsubscribe = ngDiagramService.addEventListener('selectionChanged', (event) => {
  console.log('Selection changed', event.selectedNodes);
});

---

addEventListenerOnce()

addEventListenerOnce<K>(event, callback): UnsubscribeFn

Add an event listener that will only fire once.

Type Parameters

K

K extends keyof DiagramEventMap

Parameters

event

K

The event name.

callback

EventListener<DiagramEventMap[K]>

The callback to invoke when the event is emitted.

Returns

UnsubscribeFn

A function to unsubscribe.

Example

ngDiagramService.addEventListenerOnce('diagramInit', (event) => {
  console.log('Diagram initialized', event);
});

---

areEventsEnabled()

areEventsEnabled(): boolean

Check if event emissions are enabled.

Returns

boolean

True if events are enabled.

---

getActionState()

getActionState(): Readonly<ActionState>

Returns the current action state (readonly). This includes information about ongoing actions like resizing and linking.

Returns

Readonly<ActionState>

The current action state.

---

getConfig()

getConfig(): Readonly<NgDiagramConfig>

Returns the current configuration (readonly). The returned object cannot be modified directly — use updateConfig to make changes.

Returns

Readonly<NgDiagramConfig>

The current configuration.

---

getDefaultRouting()

getDefaultRouting(): string

Gets the current default routing name.

Returns

string

Name of the default routing.

---

getEnvironment()

getEnvironment(): EnvironmentInfo

Gets the current environment information.

Returns

EnvironmentInfo

The environment info object.

---

getRegisteredRoutings()

getRegisteredRoutings(): string[]

Gets all registered routing names.

Returns

string[]

Array of registered routing names.

---

hasEventListeners()

hasEventListeners(event): boolean

Check if there are any listeners for an event.

Parameters

event

keyof DiagramEventMap

The event name.

Returns

boolean

True if there are listeners.

Example

if (ngDiagramService.hasEventListeners('selectionChanged')) {
  // There are listeners for selection changes
}

---

registerMiddleware()

registerMiddleware(middleware): () => void

Registers a new middleware in the chain.

Parameters

middleware

Middleware

Middleware to register.

Returns

Function to unregister the middleware.

(): void

Returns

void

---

registerRouting()

registerRouting(routing): void

Registers a custom routing implementation.

Parameters

routing

EdgeRouting

Routing implementation to register.

Returns

void

Example

const customRouting: Routing = {
  name: 'custom',
  computePoints: (source, target) => [...],
  computeSvgPath: (points) => '...'
};
ngDiagramService.registerRouting(customRouting);

---

removeAllEventListeners()

removeAllEventListeners(): void

Remove all event listeners.

Returns

void

Example

ngDiagramService.removeAllEventListeners();

---

removeEventListener()

removeEventListener<K>(event, callback?): void

Remove an event listener.

Type Parameters

K

K extends keyof DiagramEventMap

Parameters

event

K

The event name.

callback?

EventListener<DiagramEventMap[K]>

Optional specific callback to remove.

Returns

void

Example

// Remove all listeners for an event
ngDiagramService.removeEventListener('selectionChanged');

// Remove a specific listener
ngDiagramService.removeEventListener('selectionChanged', myCallback);

---

setDefaultRouting()

setDefaultRouting(name): void

Sets the default routing to use when not specified on edges.

Parameters

name

string

Name of the routing to set as default.

Returns

void

---

setEventsEnabled()

setEventsEnabled(enabled): void

Enable or disable event emissions.

Parameters

enabled

boolean

Whether events should be emitted.

Returns

void

Example

// Disable all events
ngDiagramService.setEventsEnabled(false);

// Re-enable events
ngDiagramService.setEventsEnabled(true);

---

startLinking()

startLinking(node, portId): void

Call this method to start linking from your custom logic.

Parameters

node

Node

The node from which the linking starts.

portId

string

The port ID from which the linking starts.

Returns

void

---

transaction()

transaction(callback): void

Executes a function within a transaction context. All state updates within the callback are batched and applied atomically.

Parameters

callback

() => void

Returns

void

Example

this.ngDiagramService.transaction(() => {
 this.ngDiagramModelService.addNodes([node1, node2]);
 this.ngDiagramModelService.addEdges([edge1]);
});

---

unregisterMiddleware()

unregisterMiddleware(name): void

Unregister a middleware from the chain.

Parameters

name

string

Name of the middleware to unregister.

Returns

void

---

unregisterRouting()

unregisterRouting(name): void

Unregisters a routing implementation.

Parameters

name

string

Name of the routing to unregister.

Returns

void

---

updateConfig()

updateConfig(config): void

Updates the current configuration.

Parameters

config

Partial<NgDiagramConfig>

Partial configuration object containing properties to update.

Returns

void