Механизм Change Detection в Angular отвечает за отслеживание изменений в данных и обновление DOM при необходимости.

Angular использует зону (NgZone) для перехвата асинхронных событий (например, кликов, HTTP-запросов). После таких событий запускается цикл обнаружения изменений, который проверяет значения привязанных свойств компонентов.

Angular сравнивает текущие значения с предыдущими (по ссылке или по значению, в зависимости от стратегии) и обновляет представление, если обнаружены изменения.

Есть две стратегии Change Detection:

Default: проверяет все компоненты в дереве
OnPush: проверяет компонент только если изменились входные данные или произошло событие внутри компонента

Это позволяет оптимизировать производительность, уменьшая количество проверок.

Пример:

@Component({
  selector: 'app-example',
  template: `{{counter}}`
})
export class ExampleComponent {
  counter = 0;

  increment() {
    this.counter++;
  }
}

При вызове increment() Angular обнаружит изменение counter и обновит отображение.

Как работает механизм Change Detection в Angular?