Use takeUntilDestroyed to Unsubscribe from Angular's Observables

Deborah Kurata June 11, 2024
Video Thumbnail
Deborah Kurata Logo

Deborah Kurata

View Channel

About

Tips and updates on Angular's newest features for anyone in the Angular community (or Angular-curious)

Video Description

The takeUntilDestroyed operator, introduced in Angular version 16, automatically unsubscribes from an observable when its component or service is destroyed. This prevents the need to manually unsubscribe. In this video, we examine the takeUntilDestroyed operator and how it can prevent memory leaks. We resolve a common error ("takeUntilDestroyed can only be used within an injection context") and discover DestroyRef. And we look at some caveats with the order of RxJS operations when using takeUntilDestroyed. *Links* Code: https://stackblitz.com/~/edit/takeuntildestroyed-deborahk Documentation: https://angular.dev/api/core/rxjs-interop/takeUntilDestroyed *Content* 00:00 takeUntilDestroyed 00:18 Rule of Subscriptions 00:38 Memory leak in action 02:36 Manually unsubscribing 03:19 Unsubscribing with takeUntilDestroyed 04:12 Error: Only available within an injection context 06:10 Using DestroyRef 07:10 Caveat: Order of operations 10:08 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #takeuntildestroyed #angularondestroyunsubscribe #unsubscribe #angularunsubscribe #rxjstakeuntilunsubscribe #rxjstakeuntilvsunsubscribe #unsubscriberxjs #unsubscribeobservable #unsubscribeinngondestroy #unsubscribeondestroyofcomponent #whyunsubscribe #rxjsunsubscribe #takeuntildestroyed

No Recommendations Found

No products were found for the selected channel.