Subscription Teardown

## What problem it solves A component that calls `subscribe()` on a long-lived Observable, such as `Router.events`, a shared service stream or an RxJS `interval`, must end that subscription when the component goes away. Otherwise the source keeps a reference to the callback, the callback keeps a reference to the component, and the callback keeps running for a component that is no longer on screen. Angular's answer is **`takeUntilDestroyed`**, exported from **`@angular/core/rxjs-interop`**. It was added in v16 as a developer preview and **promoted to stable in v19**. ## How it works The implementation is short, and knowing it answers most follow-up questions: 1. If no `DestroyRef` is passed, it calls `inject(DestroyRef)`. In development mode it first asserts that it is in an injection context. 2. It builds a small **notifier Observable** that registers `subscriber.next` with `destroyRef.onDestroy(...)` and returns the unregister function, so an early unsubscribe also removes the destroy callback. 3. It returns `source => source.pipe(takeUntil(notifier))`. When the owner is destroyed, the `onDestroy` callback fires, the notifier emits, and `takeUntil` **completes** the stream. Completion unsubscribes from the source. A subscriber's `complete` callback therefore runs on destroy, which is sometimes a surprise. Since v20, if the `DestroyRef` is **already destroyed** when the stream is subscribed, the notifier checks `destroyRef.destroyed`, emits immediately, and the stream completes at once. ## What DestroyRef represents `DestroyRef` is an injectable token whose meaning depends on where it is injected: | Injected in | Callbacks run when | |---|---| | a component or directive | that component or directive is destroyed | | a service provided in an environment injector (for example `providedIn: 'root'`) | that injector is destroyed, which for root means the application | This is why the operator gives per-screen cleanup in components and directives but not inside a root service: the root injector lives as long as the app. ## Where the no-argument form works An **injection context** is the window in which `inject()` is allowed: - the constructor of a component, directive, pipe or service; - a field initializer of such a class; - a factory function run by DI, or a function passed to `runInInjectionContext`. `ngOnInit`, event handlers, `setTimeout` callbacks and methods called later are **not** injection contexts. There you inject `DestroyRef` once into a field and pass it: `takeUntilDestroyed(this.destroyRef)`. ## Placement in the pipe `takeUntilDestroyed` completes whatever is **upstream** of it. Operators placed **after** it can still hold subscriptions of their own. For example, `switchMap` only completes when both its source and its current inner Observable have completed, so `takeUntilDestroyed()` placed before a `switchMap` to an endless inner stream leaves that inner stream running. The rule of thumb is simple: - put `takeUntilDestroyed(...)` as the **last operator** before `subscribe()`. ## When you do not need it - A stream bound in the template with the **async pipe** is unsubscribed by the pipe. - A stream converted with **`toSignal()`** is cleaned up with its injection context. - A request that **completes on its own**, such as an `HttpClient` call, ends without help, although tying it to `DestroyRef` still stops its callback running after the component is gone. ## What interviewers listen for - It **completes** the stream via `takeUntil` driven by `DestroyRef.onDestroy`. - No-argument calls need an **injection context**; elsewhere pass a **`DestroyRef`**. - `DestroyRef` means **component or directive destroy** in a component, **injector destroy** in a root service. - It belongs **last** in the pipe.