Our application uses sockets, we use socket.io, and its events are wrapped in Observables.
In one area of our application, we have a graph that is updated every 10 seconds. The graph is drawn using D3and drawn directly, without using angular.
We would like to completely disable change detection for the chart area and make sure that every socket response (Observable) does not cause change detection anywhere in the application tree.
We tried to use it zone.runOutsideAngular, but we had to put it on the lower level of the socket, where we subscribe to the Observable, which wraps socket.io... Although this worked, it fires ALL socket events outside of angular. We need to trigger only graphical events outside the angular zone.
Ideally, we need to use zones or something at the component level and only for graphs, because other areas of the application need to detect changes from socket events ...
I understand that any asynchronous operations, such as socket events, will trigger change detection.
Can we disable this at a higher level without touching the lower level services?
What is the best approach to fire specific socket.io events outside the angular zone to avoid detecting changes throughout the application?
Any insight would be very helpful.