A Guide to the `takeUntilDestroyed` Operator in Angular 16

The journey of Angular development often involves dealing with observables, and managing them properly is crucial to prevent memory leaks. One common practice is using the takeUntil operator from RxJS to automatically unsubscribe from observables when a component is destroyed. However, with the release of Angular 16, the Angular team introduced a new operator called takeUntilDestroyed, streamlining the process.

The OG takeUntil from RxJS

The takeUntil operator in RxJS is a workhorse for Angular developers. It helps in automatically unsubscribing from observables when a component is about to be destroyed, ensuring a clean memory footprint. Here's a typical usage scenario:

In this example, the takeUntil(this.onDestroy) pattern ensures the subscription is automatically unsubscribed when the component is destroyed, preventing potential memory leaks.

Introducing takeUntilDestroyed in Angular 16

With Angular 16, the Angular team introduced a more streamlined approach: the takeUntilDestroyed operator. This operator eliminates the need for an onDestroy Subject and the OnDestroy interface, providing a cleaner and more concise code structure. Let's take a look at how it's used:

By simply replacing takeUntil(this.onDestroy) with takeUntilDestroyed(), Angular 16 simplifies the cleanup process and makes the code more readable.

Advanced Usage: Passing OnDestroy reference

The takeUntilDestroyed operator can also take a reference to the OnDestroy lifecycle hook of a dependent or child observable. Here's an example:

In this example, we use takeUntilDestroyed(this.destroyRef) to automatically unsubscribe when the component is destroyed, simplifying the cleanup process even further.

In conclusion, Angular 16 brings a powerful tool for managing observables with the takeUntilDestroyed operator. This enhancement not only reduces boilerplate code but also contributes to a more maintainable and readable Angular codebase. Upgrade to Angular 16 and take advantage of this improvement in your projects!