angular · milomg · May 20, 2025
diff --git a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
@@ -56,9 +56,9 @@ import {
   parseRoutes,
   RoutePropertyType,
 } from './router-tree';
-import {ngDebugDependencyInjectionApiIsSupported} from './ng-debug-api/ng-debug-api';
+import {ngDebugClient, ngDebugDependencyInjectionApiIsSupported} from './ng-debug-api/ng-debug-api';
 import {setConsoleReference} from './set-console-reference';
-import {serializeDirectiveState} from './state-serializer/state-serializer';
+import {serializeDirectiveState, serializeValue} from './state-serializer/state-serializer';
 import {runOutsideAngular, unwrapSignal} from './utils';
 import {DirectiveForestHooks} from './hooks/hooks';
 import {getSupportedApis} from './ng-debug-api/supported-apis';
@@ -104,6 +104,8 @@ export const subscribeToClientEvents = (
     console[level](`[Angular DevTools]: ${message}`);
   });
 
+  messageBus.on('getSignalGraph', getSignalGraphCallback(messageBus));
+
   if (appIsAngularInDevMode() && appIsSupportedAngularVersion() && appIsAngularIvy()) {
     inspector.ref = setupInspector(messageBus);
 
@@ -629,3 +631,36 @@ const getInjectorInstance = (
   }
   return null;
 };
+
+const getSignalGraphCallback = (messageBus: MessageBus<Events>) => (element: ElementPosition) => {
+  const ng = ngDebugClient();
+
+  // get injector from position
+  const node = queryDirectiveForest(
+    element,
+    initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
+  );
+  if (!node) {
+    return;
+  }
+
+  const injector = getInjectorFromElementNode(node.nativeElement!);
+
+  if (!injector) {
+    return;
+  }
+
+  const graph = ng.ɵgetSignalGraph?.(injector);
+  if (graph) {
+    const nodes = graph.nodes.map((node) => {
+      return {
+        id: node.id,
+        kind: node.kind,
+        label: node.label,
+        epoch: node.epoch,
+        preview: serializeValue(node.value),
+      };
+    });
+    messageBus.emit('latestSignalGraph', [{nodes, edges: graph.edges}]);
+  }
+};
diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts
@@ -116,6 +116,10 @@ export function serializeDirectiveState(instance: object): Record<string, Descri
   return result;
 }
 
+export function serializeValue(value: unknown): Descriptor {
+  return levelSerializer({value}, 'value', false, 0, 0);
+}
+
 export function deeplySerializeSelectedProperties(
   instance: object,
   props: NestedProp[],

diff --git a/devtools/projects/protocol/src/lib/messages.ts b/devtools/projects/protocol/src/lib/messages.ts
@@ -16,6 +16,34 @@ import {
   ViewEncapsulation as AngularViewEncapsulation,
 } from '@angular/core';
 
+export interface DebugSignalGraphNode {
+  id: string;
+  kind: string;
+  epoch: number;
+  label?: string;
+  preview: Descriptor;
+}
+
+export interface DebugSignalGraphEdge {
+  /**
+   * Index of a signal node in the `nodes` array that is a consumer of the signal produced by the producer node.
+   */
+  consumer: number;
+
+  /**
+   * Index of a signal node in the `nodes` array that is a producer of the signal consumed by the consumer node.
+   */
+  producer: number;
+}
+
+/**
+ * A debug representation of the signal graph.
+ */
+export interface DebugSignalGraph {
+  nodes: DebugSignalGraphNode[];
+  edges: DebugSignalGraphEdge[];
+}
+
 export interface SignalNodePosition {
   element: ElementPosition;
   signalId: string;
@@ -306,11 +334,6 @@ export interface AngularDetection {
 
 export type Topic = keyof Events;
 
-export interface InjectorGraphViewQuery {
-  directivePosition: DirectivePosition;
-  paramIndex: number;
-}
-
 export interface SupportedApis {
   profiler: boolean;
   dependencyInjection: boolean;
@@ -332,6 +355,9 @@ export interface Events {
   inspectorStart: () => void;
   inspectorEnd: () => void;
 
+  getSignalGraph: (query: ElementPosition) => void;
+  latestSignalGraph: (graph: DebugSignalGraph) => void;
+
   getNestedProperties: (position: DirectivePosition, path: string[]) => void;
   nestedProperties: (position: DirectivePosition, data: Properties, path: string[]) => void;