{"id":2061,"date":"2024-05-15T14:23:07","date_gmt":"2024-05-15T21:23:07","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2061"},"modified":"2024-05-15T14:23:08","modified_gmt":"2024-05-15T21:23:08","slug":"signals-effect-cleanup","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/signals-effect-cleanup\/","title":{"rendered":"Signals: Effect cleanup"},"content":{"rendered":"\n

You’re probably familiar with ngOnDestroy<\/a> for Angular components\/pipes\/directives, which cleans things up when an Angular object is destroyed. A typical use case is to unsubscribe from RxJs subscriptions (though there are better-suited tools for this now<\/a>) or cancel a timer.<\/p>\n\n\n\n

Angular Signals introduced the effect()<\/a> function to run side-effects, including RxJs Observables or timers. As a result, we might want to cancel a timer or an RxJS-based task when the effect runs again in the future, and luckily for us, Angular supports a cleanup function for our effects<\/a>.<\/p>\n\n\n\n

To enable the cleanup function, we pass it as a parameter to the callback registered in our effect:<\/p>\n\n\n

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

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

Then we call it and pass our cleanup code as a param to it using an arrow function:<\/p>\n\n\n

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

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

Here is the full example in action on Stackblitz<\/a>. This example destroys a component and clears its timer thanks to the effect cleanup function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

You’re probably familiar with ngOnDestroy for Angular components\/pipes\/directives, which cleans things up when an Angular object is destroyed. A typical use case is to unsubscribe from RxJs subscriptions (though there are better-suited tools for this now) or cancel a timer. Angular Signals introduced the effect() function to run side-effects, including RxJs Observables or timers. As […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,29],"tags":[],"class_list":["post-2061","post","type-post","status-publish","format-standard","hentry","category-angular","category-signals"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2061","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=2061"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2061\/revisions"}],"predecessor-version":[{"id":2067,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2061\/revisions\/2067"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}