Декларативное управление подписками

Стандартная отписка от Observable в ngOnDestroy громоздка и провоцирует утечки памяти.

Пакет @angular/core/rxjs-interop предлагает более чистое решение. Оператор takeUntilDestroyed декларативно связывает жизненный цикл подписки с жизненным циклом компонента. Подписка автоматически завершится при уничтожении компонента. Важным условием его работы является вызов в инъекционном контексте, например, в конструкторе компонента.

import { Component, inject } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-news-feed',
  template: '<p>Последнее обновление: {{ time }}</p>',
  standalone: true,
})
export class NewsFeedComponent {
  time = 0;

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(value => {
        this.time = value;
        console.log(`Новое событие: ${value}`);
      });
  }
}

👉 @sWebDev