Angular uses RxJS heavily, and often this question comes up: “Should I manually unsubscribe from observables in my components?” Generally, RxJS is pretty good about cleaning up after itself, as it was designed for use in a “fire-and-forget” way most of the time. So, in most cases, it isn’t necessary to unsubscribe manually. However, if you prefer to be diligent, I’ll introduce you to a way to make unsubscribing from observables in your components clean and quick.
Finite and Infinite Observables
First, let’s discuss two broad categories of observables, finite and infinite. Finite observables generally return a single response, such as an HTTP request. When these observables emit their value, they call
complete() disposing of the subscription.
Infinite observables have a lifetime longer than the lifetime of the subscription and may continue emitting values after a component is destroyed. Of the two, these pose the greater risk of a memory leak or other complications. So, to be safe, I prefer to ensure all my subscriptions are disposed of in my Angular projects.
Superclass Standalone Component
We’ll start by creating a standalone component responsible for handling closing subscriptions. We will use the Angular CLI to generate our component and include some flags to get our boilerplate code configured to our needs.
ng g c auto-unsubscribe --standalone --inline-template --inline-style --skip-selector
These flags will initialize our component as a standalone component, inline both the HTML template and style, and skip including the selector.
In this component, we will create a protected field
destroyed$ of type
Subject<void>. Next, we will implement the
OnDestroy interface from the
@angular/core module. In the
ngOnDestroy lifecycle method, we emit an event from our
destroyed$ subject and close it. This subject will be used in a
takeUntil pipe in subscriptions in the subclass. Those subscriptions will be disposed of when we emit an event from the subject.
Now, let’s put our new component superclass to use. Because we set it up as a standalone component, we don’t need to declare it in any module, and we are free to use it anywhere in our project.
In our desired component, we can extend our
AutoUnsubscribeComponent to gain access to the
destroyed$ subject and the
OnDestroy functionality we implemented. We can add the
takeUntil pipe for any observables we want to unsubscribe from automatically in that component. For example:
Automatically Unsubscribe from RXJS Observables in Angular Components
That simple setup is all it takes to ensure your subscriptions are appropriately disposed of in your Angular components.