RxJs - способы отписаться

Императивный способ отписки Link to heading

export class AwesomeComponent implements OnInit, OnDestroy {
  private readonly service = inject(TodoService);
  private subscription!: Subscription;

  public todos: Todo[] = [];

  ngOnInit(): void {
    this.subscription = toObservable(this.service.todos).subscribe(
      (todos) => (this.todos = todos)
    );
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

Декларативный способ отписки Link to heading

export class AwesomeAnotherComponent {
  private readonly service = inject(TodoService);
  private destroy$ = new Subject<void>();

  public todos: Todo[] = [];

  ngOnInit(): void {
    toObservable(this.service.todos)
      .pipe(takeUntil(this.destroy$))
      .subscribe((todos) => (this.todos = todos));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

async Link to heading

Тут особо говорить нечего - и так все понятно.

Оператор takeUntilDestroyed Link to heading

takeUntilDestroyed - более новый споосб отписки в RxJs. Материалы по теме: