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 index 2b25a74ee9ba..856055c12fb0 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts @@ -131,6 +131,8 @@ export const subscribeToClientEvents = ( messageBus.on('getSignalGraph', getSignalGraphCallback(messageBus)); + messageBus.on('toggleWatchSignal', toggleWatchSignal(messageBus)); + if (appIsAngularInDevMode() && appIsSupportedAngularVersion() && appIsAngularIvy()) { inspector.ref = setupInspector(messageBus); @@ -660,12 +662,18 @@ const getSignalGraphCallback = (messageBus: MessageBus) => (element: Ele epoch: node.epoch, preview: serializeValue(node.value), debuggable: !!node.debuggableFn, + watched: node.watched ?? false, }; }); messageBus.emit('latestSignalGraph', [{nodes, edges: graph.edges}]); } }; +const toggleWatchSignal = (messageBus: MessageBus) => (id: string) => { + const ng = ngDebugClient(); + ng.toggleWatchSignal?.(id); +}; + // Route data needs to be serializable to be sent over the message bus. export function sanitizeRouteData(route: Route): Route { if (route.data) { diff --git a/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html b/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html index fb6e55b44e7e..94fef4fca39a 100644 --- a/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html +++ b/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html @@ -1,6 +1,7 @@ @let node = this.node(); @let isSignalNode = this.isSignalNode(node); @let isClusterNode = this.isClusterNode(node); +@let isWatchable = this.isWatchable(node);
@@ -48,6 +49,19 @@ > + @if (isWatchable) { + + }