{"id":721,"date":"2023-03-30T05:00:00","date_gmt":"2023-03-30T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=721"},"modified":"2024-10-21T12:50:30","modified_gmt":"2024-10-21T19:50:30","slug":"ngoninit-vs-constructor-in-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ngoninit-vs-constructor-in-angular\/","title":{"rendered":"ngOnInit vs. constructor in Angular"},"content":{"rendered":"\n

Today’s post is all about clarifying when to use a constructor and when to use ngOnInit<\/code><\/a> to initialize data in our Angular components.<\/p>\n\n\n\n

From a chronological standpoint, the constructor is called first<\/strong>. Then, once all component inputs are initialized<\/strong>, Angular is going to call ngOnInit<\/code>.<\/p>\n\n\n\n

From that definition, it makes sense to use ngOnInit only when your initialization code needs a @Input<\/a><\/code> value to be set. Something along those lines:<\/p>\n\n\n

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

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

And that’s the only rule. Some might be surprised to read this, but you could initialize everything in your constructor if your component has no inputs. There is no performance impact in doing one or the other. <\/p>\n\n\n\n

I would argue that triggering an HTTP request in the constructor is better as it’s going to happen sooner (we’re talking milliseconds, though) than if we do it in ngOnInit<\/code>.<\/p>\n\n\n\n

As a result, in the absence of any official recommendation in the Angular style guide<\/a>, you can choose one or the other.<\/p>\n\n\n\n

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

Today’s post is all about clarifying when to use a constructor and when to use ngOnInit to initialize data in our Angular components. From a chronological standpoint, the constructor is called first. Then, once all component inputs are initialized, Angular is going to call ngOnInit. From that definition, it makes sense to use ngOnInit only […]<\/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-721","post","type-post","status-publish","format-standard","hentry","category-angular","category-components"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t