ngOnInit() called by Angular to indicate that Angular is done with initializing the component. Whenever you create a new component using angular-cli ngOnInit being added by default.
Right now, if an error happens during detecting changes of content/view children of a component, ngOnInit will be called twice (seen in DynamicChangeDetector). This can lead to follow up errors that hide the original error.
The constructor() should only be used to initialize class members but shouldn't do actual "work". So we should use constructor() to setup 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.
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.
Lifecycle hooks, like OnInit()
work with Directives and Components. They do not work with other types, like a service in your case. From docs:
A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing it from the DOM.
Directive and component instances have a lifecycle as Angular creates, updates, and destroys them.
I don't know about all the lifecycle hooks, but as for destruction, ngOnDestroy
actually get called on Injectable when it's provider is destroyed (for example an Injectable supplied by a component).
From the docs :
Lifecycle hook that is called when a directive, pipe or service is destroyed.
Just in case anyone is interested in destruction check this question:
Adding to answer by @Sasxa,
In Injectables
you can use class
normally that is putting initial code in constructor
instead of using ngOnInit()
, it works fine.
I had to call a function once my dataService was initialized, instead, I called it inside the constructor, that worked for me.
Note: this answer applies only to Angular components and directives, NOT services.
I had this same issue when ngOnInit
(and other lifecycle hooks) were not firing for my components, and most searches led me here.
The issue is that I was using the arrow function syntax (=>
) like this:
class MyComponent implements OnInit {
// Bad: do not use arrow function
public ngOnInit = () => {
console.log("ngOnInit");
}
}
Apparently that does not work in Angular 6. Using non-arrow function syntax fixes the issue:
class MyComponent implements OnInit {
public ngOnInit() {
console.log("ngOnInit");
}
}
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