hardFrontend

What is NgZone and when do you run outside Angular?

Q: What is NgZone and when do you run outside Angular?

**Core concept.** Angular uses **Zone.js** to know when to run change detection — it patches async APIs ( setTimeout , events, XHR) so Angular re-checks the UI after they fire. NgZone.runOutsideAngular() runs code **without** triggering change detection (a performance escape hatch for very frequent events), and NgZone.run() re-enters the zone to update the UI. inside the zone async → CD runs runOutsideAngular no CD (fast)</te

242 views

Understand the problem

Explain NgZone.

ngzoneperformance

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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);
  }
}

Join the discussion

Discussion (0)

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

How does Angular's dependency resolution search work using @Self(), @SkipSelf(), @Optional(), and @Host()?

What is the difference between fakeAsync, tick, and waitForAsync in Angular unit tests?