{"id":205,"date":"2021-01-26T11:53:59","date_gmt":"2021-01-26T11:53:59","guid":{"rendered":"http:\/\/santosh-shah.com\/?p=205"},"modified":"2021-01-26T11:53:59","modified_gmt":"2021-01-26T11:53:59","slug":"angular-lifecycle-hooks","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/","title":{"rendered":"Angular Lifecycle Hooks"},"content":{"rendered":"\n<p>In this article, we will know about the lifecycle of Angular components. Since, in Angular, a component is the main building block of the application, it is very important to understand the lifecycle processing steps of the components so that we can understand the execution of the component in our applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lifecycle Hooks\/Methods<\/h2>\n\n\n\n<p>In Angular, every component has its own life-cycle, every component goes through a number of different stages. There are 8 different stages in the Angular component lifecycle. Every stage is called as lifecycle hook event. So, we can use these hook events in different phases of our application to obtain control of the components. Since a component is a TypeScript class, every component must have a constructor method. The constructor of the component class executes, first, before the execution of any other lifecycle hook events. If we need to inject any dependencies into the component, then the constructor is the best place to inject those dependencies. After executing the constructor, Angular executes its lifecycle hook methods in a specific order.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong><u>ngOnChanges\u00a0<\/u><\/strong>\u2013 This event executes every time when a value of an input control within the component has been changed. Actually, this event is fired first when a value of a bound property has been changed. It always receives a change data map, containing the current and previous value of the bound property\u00a0wrapped in a\u00a0<code>SimpleChange<\/code>.<\/li><li><strong><u>ngOnInit<\/u><\/strong>\u00a0\u2013 This event initializes after Angular first displays the data-bound properties or when the component has been initialized. This event is basically called only after the\u00a0<code>ngOnChanges()<\/code>events. This event is mainly used for the initialize data in a component.<\/li><li><strong><u>ngDoCheck\u00a0<\/u><\/strong>\u2013 This event is triggered\u00a0every time the input properties of a component are checked. We can use this hook method to implement the check with our own logic check. Basically, this method allows us to implement our own custom change detection logic or algorithm for any component.<\/li><li><strong><u>ngAfterContentInit\u00a0<\/u><\/strong>\u2013 \u00a0This lifecycle method is executed when Angular performs any content projection within the component views. This method executes when all the bindings of the component need to be checked for the first time. This event executes just after the\u00a0<code>ngDoCheck()<\/code>\u00a0method. This method is basically linked with the child component initializations.<\/li><li><strong><u>ngAfterContentChecked<\/u><\/strong>\u00a0\u2013 This lifecycle hook method executes every time the content of the component has been checked by the change detection mechanism of Angular. This method is called after the\u00a0<code>ngAfterContentInit()<\/code>\u00a0method. This method is also called on every subsequent execution of\u00a0<code>ngDoCheck()<\/code>. This method is also mainly linked with the child component initializations.<\/li><li><strong><u>ngAfterViewInit<\/u><\/strong>\u00a0\u2013 This lifecycle hook method executes when the component\u2019s view has been fully initialized. This method is initialized after Angular initializes the component\u2019s view and child views. It is called after\u00a0<code>ngAfterContentChecked()<\/code>. This lifecycle hook method only applies to components.<\/li><li><strong><u>ngAfterViewChecked\u00a0<\/u><\/strong>\u2013 This method is called after the\u00a0<code>ngAterViewInit()<\/code>\u00a0method. It is executed every time the view of the given component has been checked by the change detection algorithm of Angular. This method executes after every subsequent\u00a0execution of the\u00a0<code>ngAfterContentChecked()<\/code>. This method also executes when any binding of the children directives has been changed. So this method is very useful when the component waits for some value which is coming from its child components.<\/li><li><strong><u>ngOnDestroy<\/u><\/strong>\u00a0\u2013 This method will be executed just before Angular destroys the components. This method is very useful for unsubscribing\u00a0from the observables and detaching the event handlers to avoid memory leaks. Actually, it is called just before the instance of the component is finally destroyed. This method is called just before the component is removed from the DOM.<\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will know about the lifecycle of Angular components. Since, in Angular, a component is the main building block of the application, it is very important to understand the lifecycle processing steps of the components so that we can understand the execution of the component in our applications. Lifecycle Hooks\/Methods In Angular, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular Lifecycle Hooks - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Lifecycle Hooks - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"In this article, we will know about the lifecycle of Angular components. Since, in Angular, a component is the main building block of the application, it is very important to understand the lifecycle processing steps of the components so that we can understand the execution of the component in our applications. Lifecycle Hooks\/Methods In Angular, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-26T11:53:59+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/\",\"name\":\"Angular Lifecycle Hooks - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2021-01-26T11:53:59+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Lifecycle Hooks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Lifecycle Hooks - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/","og_locale":"en_US","og_type":"article","og_title":"Angular Lifecycle Hooks - Santosh Kumar Shah","og_description":"In this article, we will know about the lifecycle of Angular components. Since, in Angular, a component is the main building block of the application, it is very important to understand the lifecycle processing steps of the components so that we can understand the execution of the component in our applications. Lifecycle Hooks\/Methods In Angular, [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2021-01-26T11:53:59+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/","url":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/","name":"Angular Lifecycle Hooks - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2021-01-26T11:53:59+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/angular-lifecycle-hooks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Lifecycle Hooks"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}