{"id":1176,"date":"2023-07-12T05:00:00","date_gmt":"2023-07-12T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1176"},"modified":"2023-07-07T15:34:29","modified_gmt":"2023-07-07T22:34:29","slug":"lifecycle-of-angular-applications","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/lifecycle-of-angular-applications\/","title":{"rendered":"Lifecycle of Angular applications"},"content":{"rendered":"\n<p>The lifecycle of an Angular application is something that many aspiring Angular developers struggle with. People often ask me questions such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How long does this component\/service\/directive stay in memory? <\/li>\n\n\n\n<li>How do I save the data before I navigate to the next page\/view\/component?<\/li>\n\n\n\n<li>What happens if I open that same app in another browser tab?<\/li>\n<\/ul>\n\n\n\n<p>Here is how to think about it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When we open an app in a browser tab, we&#8217;re booting an Angular application in a self-contained memory space, similar to a virtual machine.<\/li>\n\n\n\n<li>Closing that tab is equivalent to killing the application, freeing any memory associated with it, just like when you close a desktop app in your machine&#8217;s operating system.<\/li>\n<\/ul>\n\n\n\n<p>In Google Chrome, there&#8217;s even a <a href=\"https:\/\/9to5google.com\/2022\/05\/31\/did-you-know-chrome-had-its-own-task-manager-on-windows-heres-how-to-use-it\/\" target=\"_blank\" rel=\"noopener\" title=\"\">task manager<\/a> where you can see the memory footprint and CPU usage of your tabs and browser extensions &#8211; they&#8217;re just like independent desktop apps:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"561\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-3.png\" alt=\"\" class=\"wp-image-1177\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-3.png 648w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-3-300x260.png 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>From an Angular perspective, a <strong>component <\/strong>gets loaded in memory whenever displayed on the screen. That&#8217;s when its class is instantiated.<\/p>\n\n\n\n<p>Suppose the component gets removed from the screen (by navigating to a different component or removing it with a ngIf directive, for instance). In that case, the component is destroyed, and all of its memory state is gone. The same goes for <strong>directives <\/strong>and <strong>pipes<\/strong>: They get created when used by a component template and destroyed when that component gets destroyed.<\/p>\n\n\n\n<p><strong>Services<\/strong> are different, though. A service is created by Angular when a component needs it for the first time. Then, that instance remains unique and shared between all components that inject such service. A service doesn&#8217;t get destroyed: It remains in memory as long as your app is open and you don&#8217;t close your browser or tab.<\/p>\n\n\n\n<p>This answers our three initial questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How long does this component\/service\/directive stay in memory? <br><strong>Components <\/strong>stay as long as they&#8217;re in the DOM. <strong>Services <\/strong>stay as long as the app is open.<\/li>\n\n\n\n<li>How do I save the data before I navigate to the next page\/view\/component?<br>Not if you save it in a <strong>service<\/strong><\/li>\n\n\n\n<li>What happens if I open that same app in another browser tab?<br>You create another <strong>separate instance of everything: Components, services, etc. <\/strong>Both instances are independent and do not share any data or memory space.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The lifecycle of an Angular application is something that many aspiring Angular developers struggle with. People often ask me questions such as: Here is how to think about it: In Google Chrome, there&#8217;s even a task manager where you can see the memory footprint and CPU usage of your tabs and browser extensions &#8211; they&#8217;re [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20,17],"tags":[],"class_list":["post-1176","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1176","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=1176"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1176\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1176\/revisions\/1178"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}