Menu
What are the differences between constructor, ionViewDidLoad and ngOnInit methods. What actions are appropriate in each case.
919
The constructor() should only be used to initialize class members but shouldn't do actual “work”. So we should use constructor() to set up Dependency Injection, Initialization of class fields, etc. ngOnInit() is a better place to write “actual work code” that we need to execute as soon as the class is instantiated.
NgOnit is a lifecycle hook provided by the Angular 2 framework. Your component must implement OnInit in order to use it. This lifecycle hook gets called after the constructor is called and all the variables are initialized. The bulk of your initialization should go here.
ngOnInit()link A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
Constructor
A constructor is not an Angular feature, it is called by the Javascript engine. Well, written in TypeScript but it is an ES6 concept, it is part of the class lifecycle hook. Therefore it is not a good place to know when Angular has finished initialising its components.
It is the right place to do any dependency injection.
ngOnInit
The ngOnInit is an Angular lifecycle hook. It is executed when Angular has finished setting up the component. This means that at this point property bindings are done for example.
It is a good place for initialising some data for the component.
ionViewDidLoad
The ionViewDidLoad is an Ionic navigation lifecycle event. Ionic has a concept of pages. It has some classes related to the navigation logic, the base class for it is NavController. They have a concept of navigation stack, so the pages are basically pushed or popped from the stack. During this process of navigation lifecycle events like ionViewDidLoad are fired up.
ionViewDidLoad is called once the page has been loaded. Pages are cached by default this means this event won't be fired up again if not destroyed.
Considering that it is a good place to put set up code for the page.
References:
Ionic NavControler
Angular Lifecycle Hooks
ES6 Classes
135
The best practices are:
Use constructor only for dependency injection.
Use ngOnInit to set component properties from static data or navigation data (via NavParams). Template can use the properties set by ngOnInit, i.e., there is no need to use Elvis operator data?.prop to check nullity. It is called only once when a component is created.
Use ionViewDidLoad to set properties only once, similar to ngOniInit. A page only fires this event once when it is created. A page loaded from cache (for example, a page is loaded after a top page is popped) doesn't fire this event. It is ok to use this to set properties of a modal page because modal page is at the top of a stack and is not cached.
Use ionViewWillEnter for setting data every time a page is entered. Unlike ngOninit and ionViewDidLoad, it fires even from cached pages.
For both ionViewDidLoad and ionViewWillEnter events, component properties are not initialized when a page's template is rendered. You should use Elvis operator to check the nullity of an object before access its members.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
