10

We have a number of components in our Angular application that need to regularly display new values every second that are unique to each component (countdowns, timestamps, elapsed time, etc). The most natural way to is to create observables that use the RxJS timer and interval factory functions. However, these trigger Angular change detection at every interval for the entire app as many times as the interval function was called. If we have dozens of components on the page, this triggers change detection for the entire app dozens of times every second or time period, creating a large performance overhead.

So far there are two ways I've attempted to solve the problem. A good answer to either would be very helpful - ideally both. I want to avoid manual trigger of change detection and instead rely on new values emitted from Observables and have the async pipe/OnPush change detection strategy be responsible for triggering change detection. If this isn't possible, I'd like to understand why.

  1. Is there any way to disable or prevent RxJS timer or interval functions from triggering Angular change detection? Using NgZone zone.runOutsideAngular(() => this.interval$ = interval(1000) ... ) does not appear to do this. StackBlitz example: https://stackblitz.com/edit/angular-zo5h39
  2. Alternatively, if I create an Observable stream using an RxJS Subject combined with setInterval called inside zone.runOutsideAngular, why isn't change detection triggered for the child component when a new value is emitted from the subject? StackBlitz example: https://stackblitz.com/edit/angular-yxdjgd
Craig Smitham
  • 3,395
  • 4
  • 31
  • 38

1 Answers1

10
  1. Is there any way to disable or prevent RxJS timer or interval functions from triggering Angular change detection? Using NgZone zone.runOutsideAngular(() => this.interval$ = interval(1000) ... ) does not appear to do this.

It's because observables are cold and the value producer (setInterval) is only executed when a subscription happens. Read more here. Although this code is executed outside of Angular zone:

() => this.interval$ = interval(1000) ...

it doesn't actually immediately invoke the value producer inside interval operator. It will be later invoked when AsyncPipe in the IntervalInnerComponent subscribes. And this happens in inside Angular zone:

enter image description here

Using subject in the next alternative you make it hot and subscribe immediately outside of Angular zone.

  1. Alternatively, if I create an Observable stream using an RxJS Subject combined with setInterval called inside zone.runOutsideAngular... setInterval values are being created (they can be subscribed to manually), but the async pipe does not appear to be triggering change detection

Because Async Pipe doesn't trigger change detection. It simply marks a component and all its ancestors for check during the following change detection whenever it will be. See this answer or this article for more details. Zone.js triggers change detection. But since you're running setInterval outside Angular zone, it doesn't trigger it. Under this setup you have a few options:

  • inject ChangeDetectorRef and manually trigger change detection for the component and its ancestors
  • inject ApplicationRef and manually trigger change detection for the entire application
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • So, am I correct in understanding that #2 is really the only viable route here - is there no variation of #1 that will cause `interval` to execute outside the Angular Zone? My concerns with #2 (beyond the cognitive overhead of managing change detection manually), is that in order to get the same behavior of RxJS's `interval` or `timer` functions it will require the creation/management of Subjects for each usage that will be difficult to manage and dispose of properly. For our case it may be acceptable to create a single subject that fires every second, but that seems a little crude. – Craig Smitham Dec 04 '18 at 19:53
  • @CraigSmitham _is there no variation of #1 that will cause interval to execute outside the Angular Zone_ - only if you subscribe to it outside of Angular zone and make it hot. For that, you may consider using [Subjects](https://blog.angularindepth.com/rxjs-understanding-subjects-5c585188c3e1), e.g. Replay subject, and connecting them immediately to `interval` with operators like `shareReplay`. – Max Koretskyi Dec 05 '18 at 17:15
  • 1
    @CraigSmitham, also check out [this project](https://github.com/ftischler/ngx-rxjs-zone-scheduler/tree/master/projects/ngx-rxjs-zone-scheduler#usage), maybe it'll give you some ideas – Max Koretskyi Dec 06 '18 at 11:32