What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Angular’s takeUntilDestroyed to complete an Observable subscription when its owning Angular lifecycle context is destroyed. Import it from @angular/core/rxjs-interop and place it in the Observable pipeline before subscribe(). Omit its argument when the operator is called in an injection context; pass the appropriate DestroyRef when calling it later or outside one.
What takeUntilDestroyed does
takeUntilDestroyed is an RxJS interop operator that completes the Observable when its calling context is destroyed. This lets the subscription end with the component, directive, service, or other context that owns it, rather than continuing to receive values after that context has ended. Angular marks the API stable since v19.0. See the official API reference.
Use it in a pipe before subscribing:
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
this.notifications
.pipe(takeUntilDestroyed())
.subscribe((message) => this.show(message));When to pass DestroyRef
The operator can find the current DestroyRef automatically when called in an Angular injection context. That commonly includes setup performed during construction. If the operator is called from a method that runs later, the call may be outside that context; inject a DestroyRef while one is available and pass it to the operator.
import {DestroyRef, inject} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
private readonly destroyRef = inject(DestroyRef);
startListening() {
this.notifications
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((message) => this.show(message));
}Angular’s takeUntilDestroyed guide describes the optional argument for injection-context calls and passing a reference when it is needed outside that context.
#1 Best Overall
Choose the DestroyRef whose lifetime should own the subscription
A DestroyRef is tied to the scope from which it is obtained. In a component or directive, it follows that instance’s destruction. In other code, it follows the corresponding injector. This matters especially in services: a service’s lifetime depends on its injector scope, so a subscription in a service is not necessarily cleaned up when one component using that service is destroyed. See Angular’s DestroyRef API reference.
Before adding the operator, decide which context should end the work. If the subscription should stop with a particular component, use that component’s DestroyRef. If it belongs to a longer-lived service, its cleanup follows that service’s injector scope instead.
When Angular destroys a component
Destruction is a lifecycle event, not just an application-shutdown event. Angular notes that a component can be destroyed when it is no longer shown, such as when an @if condition hides it, or after navigation. A subscription owned by that component should not keep performing component-specific work after the instance is gone. Angular describes these lifecycle events in its component lifecycle guide.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Using it with router events
Router events are a long-lived stream, so they are a natural case for lifecycle cleanup. Angular’s routing lifecycle and events guide demonstrates passing an injected DestroyRef in a service method that starts tracking:
Rank #3
import {DestroyRef, inject} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {Router} from '@angular/router';
private readonly destroyRef = inject(DestroyRef);
constructor(private readonly router: Router) {}
startTracking() {
this.router.events
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((event) => {
// Handle router events here.
});
}As with any service subscription, confirm that the service’s injector scope matches the lifetime you intend to govern the tracking.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.HTTP requests and other alternatives
Angular documents that unsubscribing from an in-progress HttpClient request aborts it. However, HTTP Observables usually complete after a response, so lifecycle cleanup is most consequential for long-lived streams or for preventing callbacks from touching a destroyed component. Angular’s HTTP guide also points to AsyncPipe and toSignal as options that dispose of subscriptions.
- Use
takeUntilDestroyedfor imperative subscriptions in TypeScript that should follow an Angular context’s lifetime. - Use
AsyncPipewhen the template consumes the Observable. - Consider
toSignalwhen the code needs a signal representation of an Observable.
These options serve different code shapes; the relevant choice depends on where the subscription is created and which lifecycle scope should own it.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
