In angular, component is having its life cycle.Which means from component birth to component death its having different phases. When we create the component and when its destroyed, how many phases are there and what exactly triggers each phase. So will see in this tutorial.
Lets have a look into below diagram –
In above diagram angular life cycle hooks are mentioned in the order in which its executed.
These phases are broadly split up into phases that are linked to the component itself and phases that are linked to the children of that component.
Lets see what exactly each phase do-
1. constructor : when component or directive is created in angular by calling the new keyword of the class , at that time constructor function is invoked.
2. ngOnChanges : This lifecycle hook is called whenever there is any changes in any of the input property of the component. It must be defined to handle the changes.
3. ngOnInit : Whenever the component is initialized at that time this lifecycle hook is called. This hook is called only once after the ngOnChanges.
4. ngDoCheck : This lifecycle hook is invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component. One Important point need to remember about this hook is ngDoCheck and ngOnChanges should not be implemented together on the same component.
5. ngAfterContentInit : This lifecycle hook is invoked if there is any content projection is performed by angular into the component’s view.
6. ngAfterContentChecked : This lifecycle hook is invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
7. ngAfterViewInit : This lifecycle hook is invoked when the component’s view has been fully initialized. This hook comes in handy when we want to reference a component instance in our component using ViewChild/ViewChildren.
8. ngAfterViewChecked : This lifecycle hook is invoked each time the view of the given component has been checked by the change detection mechanism of Angular.
9. ngOnDestroy : This method will be invoked just before Angular destroys the component. Use this hook to unsubscribe observables and detach event handlers to avoid memory leaks.
We need to add the methods in the components like this –
Conclusion : So this is the short description about the component life cycle hook. We will see each lifecycle hook in detail with examples in upcoming tutorials.
So to summarize these hooks are divided into two parts. First one is hooks which are directly used in the component itself and another one is which are linked with child components. In First diagram you can see the hooks which are in green color are Linked with children component and hooks with blue color are linked with component itself. And constructor is used at component level.
