{"id":1363,"date":"2023-08-24T05:00:00","date_gmt":"2023-08-24T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1363"},"modified":"2025-04-01T11:50:29","modified_gmt":"2025-04-01T18:50:29","slug":"ngoninit-lifecycle-hook","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ngoninit-lifecycle-hook\/","title":{"rendered":"ngOnInit lifecycle hook"},"content":{"rendered":"\n<p>A few days ago, we talked about the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/ngonchanges-lifecycle-hook\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>ngOnChanges<\/code> lifecycle hook<\/a>. We saw that every time an <code>@Input()<\/code> changes, Angular will trigger <code>ngOnChanges<\/code>. <code>ngOnInit<\/code> is similar but runs <strong>only once<\/strong>; after all <code>@Input()<\/code> receive their initial value. The <a href=\"https:\/\/angular.dev\/api\/core\/OnInit\" target=\"_blank\" rel=\"noopener\" title=\"\">official documentation<\/a> puts it like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"282\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-31.png\" alt=\"\" class=\"wp-image-1364\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-31.png 706w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/08\/image-31-300x120.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The above definition might surprise you because there is a widespread belief that the purpose of ngOnInit is to run all initialization tasks, even though the class constructor runs before <code>ngOnInit<\/code>, as explained a few months ago in this entry: <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/ngoninit-vs-constructor-in-angular\/\" target=\"_blank\" rel=\"noopener\" title=\"\">ngOnInit vs. constructor in Angular<\/a>.<\/p>\n\n\n\n<p>As a result, using <code>ngOnInit<\/code> is only 100% justified when you want to run some code that needs the value(s)  of <code>@Input()<\/code> properties of your component\/directive. In other scenarios, you can use a constructor to run your initialization code sooner.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few days ago, we talked about the ngOnChanges lifecycle hook. We saw that every time an @Input() changes, Angular will trigger ngOnChanges. ngOnInit is similar but runs only once; after all @Input() receive their initial value. The official documentation puts it like this: The above definition might surprise you because there is a widespread [&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,8],"tags":[],"class_list":["post-1363","post","type-post","status-publish","format-standard","hentry","category-angular","category-components"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1363","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=1363"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1363\/revisions"}],"predecessor-version":[{"id":2282,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1363\/revisions\/2282"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}