ChangeDetectorRef для ручного контроля изменений в компонентах

ChangeDetectorRef — инструмент в Angular, позволяющий управлять обнаружением изменений в компонентах вручную. Это особенно полезно, когда автоматическое обнаружение изменений (change detection) не может уловить изменения состояния, например, при работе с асинхронными операциями или сторонними библиотеками, которые Angular не отслеживает по умолчанию.

Методы markForCheck() и detectChanges() позволяют более гибко управлять процессом обновления компонента. Например, если нужно обновить представление при изменении данных, полученных через сторонний API, можно вызвать detectChanges() после обновления данных:

import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`
})
export class ExampleComponent {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateData(newData: string) {
    this.data = newData;
    this.cdr.detectChanges();
  }
}

👉 @sWebDev