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
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.
- Is there any way to disable or prevent RxJS
intervalfunctions 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
- Alternatively, if I create an Observable stream using an RxJS
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
- 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:
Using subject in the next alternative you make it hot and subscribe immediately outside of Angular zone.
- 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
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:
ChangeDetectorRefand manually trigger change detection for the component and its ancestors
ApplicationRefand manually trigger change detection for the entire application