Sign in
Skip to solution
hardFrontend

What is NgZone and when do you run outside Angular?

242 views
01

Understand the problem

Explain NgZone.

ngzoneperformance
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

NgZone integrates Zone.js so Angular knows when to run change detection. For high-frequency work (animations, scroll, third-party libs) you call ngZone.runOutsideAngular(...) to skip change detection, then run(...) to re-enter when you need the UI updated.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Run a hot loop outside Angular
import { Component, NgZone } from '@angular/core';

@Component({ selector: 'app-root', standalone: true, template: '{{ fps }} fps' })
export class AppComponent {
  fps = 0;
  constructor(private zone: NgZone) {
    // a rAF loop OUTSIDE Angular → no change detection every frame
    this.zone.runOutsideAngular(() => {
      const loop = () => { /* heavy per-frame work */ requestAnimationFrame(loop); };
      loop();
    });
    // when you actually need to update the view, re-enter:
    setInterval(() => this.zone.run(() => (this.fps = 60)), 1000);
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 116 of 121 decoded in the Angular track. One more won't hurt.

Back to track