{"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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=949"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/949\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/949\/revisions\/955"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}