Our application uses sockets, we are using socket.io and its events are wrap with Observables.

In one area of our application we have a graph that updates every 10th of a second. The graph is drawn with D3 and draws directly without using angular.

We would like to disable change detection for the graph area completely and ensure that each socket response (Observable) does not trigger change detection anywhere in the application tree.

We tried using zone.runOutsideAngular, but we had to put it at the lower socket layer where we subscribe to the Observable that wraps socket.io...Although this worked, it runs ALL socket events outside angular. We need to run only the graphing events outside of angular's zone.

Ideally we need to use zones or something at the component level and only for the graphs, because other areas of the application do need change detection from socket events...

It is my understanding that any async operations such as socket events will trigger change detection.

Can we disable this at a higher level without having to touch lower level services?

What is the best approach for running specific socket.io events outside of angular's zone in order to avoid change detection in the whole application?

Any insight would be greatly appreciated.