Angular 2, using ngZone.runOutsideAngular with a requestAnimationFrame loop

Question

From what i have read online the Angular team recommends that you should always call requestAnimationFrame() outside of the Angular zone like this:

this.ngZone.runOutsideAngular(() => {
  requestAnimationFrame(timestamp => {
    let timerStart = timestamp || new Date().getTime();
    this.myAnimeMethod(timestamp);
  });
});

But what about the loop ...

this.ngZone.runOutsideAngular(() => {
  requestAnimationFrame(timestamp => {
    let timerStart = timestamp;
    this.myAnimeMethod(timestamp, timerStart);
  });
});

myAnimeMethod(timestamp, timerStart) {
  let time = timestamp || new Date().getTime();
  let runtime = time - timerStart;

  /// animation logic here

  if(runtime < 10000) {

    // ------- continue to animate for 10 seconds -- //

    requestAnimationFrame(timestamp => {
      this.myAnimeMethod(timestamp, timerStart);
    });
  }
}

Was it enough to call this.ngZone.runOutsideAngular() on the first request or should i be calling it again this.ngZone.runOutsideAngular() inside myAnimeMethod() like this?

this.ngZone.runOutsideAngular(() => {
  requestAnimationFrame(timestamp => {
    let timerStart = timestamp;
    this.myAnimeMethod(timestamp, timerStart);
  });
});

myAnimeMethod(timestamp, timerStart) {
  let time = timestamp || new Date().getTime();
  let runtime = time - timerStart;

  /// animation logic here

  if(runtime < 10000) {

    // ------- request to run outside of Angular again while continuing to animate for 10 seconds -- //

    this.ngZone.runOutsideAngular(() => {
      requestAnimationFrame(timestamp => {
        this.myAnimeMethod(timestamp, timerStart);
      });
    });

  }
}

fr0 · Accepted Answer · 2017-11-20T20:52:15.207

1

Short answer: You don't need to continue to call NgZone.runOutsideAngular from a requestAnimationFrame handler that came from a call outside Angular.

Long answer: Once you're in the "root" zone (which is what you get when you call NgZone.runOutsideAngular), any requestAnimationFrame callbacks will also run from that zone unless you explicitly request a different zone, e.g. via NgZone.run.

To check this, try calling the static function NgZone.isInAngularZone() from your requestAnimationFrame handler.

Note that I tested this with Angular 4.4.4 and Zone.js 0.8.18.

edited Nov 20 '17 at 20:52

answered Nov 20 '17 at 20:27

fr0

1,048
2
9
16

and @DevMike is this still relevant? I cannot get `requestAnimationFrame` to run at all. – Ben Racicot Nov 15 '20 at 02:02

score 0 · Answer 2 · answered Oct 16 '20 at 10:20

You can also make a ngzon-flags.ts where you put all your exceptions for change detection.

// All events inside the BLACK-LIST Array will not trigger updates anymore from angular
// requestAnimationFrame wont trigger change detection
(window as any).__Zone_disable_requestAnimationFrame = true; 
// Same for scroll and mousemove or any other event youll add
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove'];

Import that file to your polyfills.ts:

import './ngzone-flags'

Angular 2, using ngZone.runOutsideAngular with a requestAnimationFrame loop

2 Answers2