Angular. Disable change detection for timer

Question

I have a kludge in angular application that checks dom tree regularly (using javascript function setinterval) and updates some stuff (this code is related to lack of some DOM tree events). It will take me a long time to move this functinality into angular-approved way and I'm not very fond of this migration idea: "don't touch it if it works" rule :) There is only one problem - it looks like setinterval forces whole angular application to check for changes. How can I suppress this issue? I want to disable change detection for this only timer.

Thank you in advance!

Mohit Saxena · Accepted Answer · 2021-01-30 05:48:52Z

2

I will recommend you to use the ON Push Change detection strategy.

 changeDetection: ChangeDetectionStrategy.OnPush

The following actions do not trigger change detection using the OnPush change detection strategy:

setTimeout, setInterval, Promise.resolve().then(), (of course, the same for Promise.reject().then()) this.http.get('...').subscribe() (in general, any RxJS observable subscription)

SO If you want to run change detection for a case or for other places you can use: ChangeDetectorRef package.

import { ChangeDetectionStrategy, Component, ChangeDetectorRef  } 

constructor(private c: ChangeDetectorRef ) {}



 this.c.detectChanges()  // call where you need it

answered Jan 30, 2021 at 5:48

Mohit Saxena

1,4471 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chellappan வ · Accepted Answer · 2021-01-30 06:25:56Z

1

NgZone API allows us to execute certain code outside Angular’s Zone.

Inject NgZone service then use runOutsideAngular method to run the certain code outside angular zone.

constructor(private ngZone: NgZone){}

this.ngZone.runOutsideAngular(()=>{
      setInterval(()=>{
       .....
      })
 });

answered Jan 30, 2021 at 6:25

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

1 Comment

user149691 Over a year ago

Thank you, sir! That's exactly what I was looking for!

Collectives™ on Stack Overflow

Angular. Disable change detection for timer

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related