Что обычно делают в ngOnDestroy?

Angular управляет жизненным циклом компонентов и директив через набор хуков. Один из них — ngOnDestroy, который вызывается один раз, непосредственно перед тем как Angular удалит компонент из DOM и уничтожит его экземпляр. В этот момент важно освободить всё, что компонент «захватил» во время своей работы, иначе эти ресурсы останутся в памяти и продолжат работать, хотя компонента уже нет.

Что обычно делают в ngOnDestroy

• Отписываются от Observable и Subject, чтобы избежать утечек памяти.
• Очищают таймеры, созданные через setTimeout и setInterval.
• Отменяют подписки на глобальные события (window, document, resize, scroll).
• Отключают WebSocket-соединения, EventSource, сторонние библиотеки.
• Отписываются от FormControl, valueChanges, router.events.

Пример

@Component({ selector: 'app-timer', template: '{{ value }}' })
export class TimerComponent implements OnInit, OnDestroy {
  value = 0;
  private intervalId?: number;
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.intervalId = window.setInterval(() => this.value++, 1000);
    someService.stream$
      .pipe(takeUntil(this.destroy$))
      .subscribe(v => this.value = v);
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Часто вместо ручной отписки от каждого Observable используют паттерн takeUntil(destroy$) или async-pipe, который автоматически отписывается при уничтожении компонента. Но для таймеров, глобальных слушателей и внешних соединений ngOnDestroy остаётся обязательным местом очистки.

Итог: ngOnDestroy нужен для корректного освобождения ресурсов при удалении компонента — это защищает приложение от утечек памяти и неожиданных побочных эффектов.