Що таке ngzone в Angular?

NgZone — це сервіс в Angular, що використовується для управління зонами виконання (контекст виконання) та ініціювання виявлення змін. Він базується на бібліотеці zone.js і дозволяє Angular відстежувати всі асинхронні операції, такі як setTimeout, Promise, XHR тощо.

Чому NgZone?

Angular використовує NgZone для:

автоматичного ініціювання виявлення змін після завершення асинхронних операцій;
відстеження зовнішніх подій (наприклад, click, HTTP, setTimeout);
дозволу на оптимізацію продуктивності шляхом ручного управління ініціюванням виявлення змін.

Як працює NgZone

Коли відбувається асинхронна подія (наприклад, setTimeout, fetch, input), Angular автоматично:

Входить в NgZone;
Виконує асинхронне завдання;
Після завершення — викликає Change Detection для оновлення UI.

Приклад

typescript

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-zone-demo',
  template: `<p>{{progress}}%</p>`
})
export class ZoneDemoComponent {
  progress = 0;

  constructor(private ngZone: NgZone) {}

  startProgress() {
    this.progress = 0;
    this.increaseProgress();
  }

  // Без виходу з зони — буде ініціювати виявлення змін на кожному кроці
  increaseProgress() {
    if (this.progress < 100) {
      setTimeout(() => {
        this.progress += 1;
        this.increaseProgress();
      }, 10);
    }
  }
}

Що якщо ми вийдемо з зони?

Іноді вам не потрібно ініціювати change detection занадто часто. У цьому випадку ви можете використовувати runOutsideAngular():

typescript

this.ngZone.runOutsideAngular(() => {
  this.progress = 0;
  const timer = setInterval(() => {
    this.progress += 1;

    if (this.progress >= 100) {
      clearInterval(timer);

      // Повертаємось назад до Angular зони для оновлення UI
      this.ngZone.run(() => {
        console.log("Завершено!");
      });
    }
  }, 10);
});

runOutsideAngular() — виконує код поза Angular зоною, тому виявлення змін не ініціюється щоразу.
run() — вручну повертає до контексту Angular і ініціює оновлення UI.

Резюме

Що робить NgZone?	Переваги
Відстежує асинхронні операції	Автоматичні оновлення UI
Ініціює Change Detection	Зручно при взаємодії з DOM
Дозволяє вихід з зони (`runOutsideAngular`)	Поліпшення продуктивності
Дозволяє вручну повертатись до Angular зони	Контроль над оновленнями інтерфейсу

Зміст

Чому NgZone?Як працює NgZoneПрикладЩо якщо ми вийдемо з зони?Резюме

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке ngzone в Angular?

#Чому NgZone?

#Як працює NgZone

#Приклад

#Що якщо ми вийдемо з зони?

#Резюме

#Зміст