{"id":949,"date":"2023-05-15T05:00:00","date_gmt":"2023-05-15T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=949"},"modified":"2023-05-12T15:10:40","modified_gmt":"2023-05-12T22:10:40","slug":"anti-pattern-series-not-unsubscribing-from-observables","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/anti-pattern-series-not-unsubscribing-from-observables\/","title":{"rendered":"Anti-pattern series: Not unsubscribing from Observables"},"content":{"rendered":"\n

We covered this in our newsletter before: Observables can cause memory leaks if we don’t unsubscribe<\/a> from them.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Before Angular 16, there were a few different techniques available<\/a> to unsubscribe automatically, the best of those being the async<\/code> pipe (and yes, it’s possible to use the async<\/code> pipe 100% of the time if you use the tricks highlighted here<\/a> – no excuses).<\/p>\n\n\n\n

With Angular 16, things are even better, as you can use the new takeUntilDestroyed<\/code> operator<\/a> as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

But here’s my million-dollar tip for today: Instead of using takeUntilDestroyed<\/code> in your components, use it in the services that expose such Observables:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

That way, whether you use an async<\/code> pipe or not, your components are covered. That’s one of the nice things about Observables: We can change them whenever and wherever we want using pipe()<\/code>, including in our services – so that all subscribers benefit from that change downstream.<\/p>\n","protected":false},"excerpt":{"rendered":"

We covered this in our newsletter before: Observables can cause memory leaks if we don’t unsubscribe from them. Before Angular 16, there were a few different techniques available to unsubscribe automatically, the best of those being the async pipe (and yes, it’s possible to use the async pipe 100% of the time if you use […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,28,10],"tags":[],"class_list":["post-949","post","type-post","status-publish","format-standard","hentry","category-angular","category-anti-patterns","category-rxjs"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t