Life-Cycle hooks in Angular
If a new component is created in angular and of course, angular is responsible for creating these components, when it finds one of our selectors for example , it will instantiate a new version of that component and add it into the DOM. So once a new component is instantiated, Angular goes through a couple of different phases in this creation process and it will give us a chance to hook up into these phases and execute some code.We can hook into these phases by implementing some methods Angular will call if they are present. There are several lifecycle hooks which are provided by Angular.
1. ngOnChanges()
The first phase which we can hook into is ngOnChanges() and this may actually be executed multiple times. It is executed right on the start when a new component is created but thereafter it is also called whenever our bound one of the input properties changes which means those properties which are decorated @Input(), whenever these properties receive new values.
2. ngOnInit()
Now the second hook is ngOnInit() and this method gets executed once the component is initialized. However, it does not mean that we can see it as it has not been added to the DOM yet , so to said it has not been displayed yet but Angular finished the basic initialisation, for example , our properties can be accessed and initialised so we can say that the object was created and moreover ngOnInit() will run after the constructor() .
3. ngDoCheck()
The third hook we have is ngDoCheck() which will also run multiple times. Actually, this method will run a lot because this method will run whenever change detection runs. Now change detection is simply the system by which Angular determines whether something change on the template of a component or inside of a component, so whether it needs to change something in the template. For example, let us say a property value changes and that property is output in the template, in such case Angular needs to re-render that part of the template and ngDoCheck() is a hook executed on “every check” Angular makes. Now” every check” does not only means if something changes, a lot of times ngDoCheck() will run if we for example, clicking some button which doesn’t change anything but still its an event and on the event, Angular has to check if something changed because how else would it know? So it has to check on certain triggering events like we clicked somewhere or a timer fired and on all these occasions it will check our code and ngDoCheck() will be executed.
4. ngAfterContentInit()
ngContentInit() is called whenever the content projected via [ngContent] has been initialised . So not the view of the component itself but instead we can say that the view of the parent component especially the part which will be added to our component through [ngContent] .
5. ngAfterContentChecked()
This hook is executed whenever change detection checked this content will projecting into our component.
6. ngAfterViewInit()
ngAfterViewInit() is then reached when the view of our own component has been finished initializing or we can say once our view has been rendered.
7. ngAfterViewChecked()
ngAfterViewChecked() will be called when our view has been checked, so once we are sure that either all the changes that had to be done had been displayed in the view or no changes were detected by the angular.
8. ngOnDestroy()
Finally, if we destroy a component for example, if we placed ngIf on a component and it then gets set to false and therefore it removes it from the DOM, ngOnDestroy() is called.
Lifecycle
|
ngOnChanges
|
Called after a bound input property changes
|
|
ngOnInit
|
Called once the component is initialised
|
|
ngDoCheck
|
Called during every change detection run
|
|
ngAfterContentInit
|
Called after content [ng-content] has been projected into view
|
|
ngAfterContentChecked
|
Called every time the projected content has been checked
|
|
ngAfterViewInit
|
Called after the component's view and child views has been initialised
|
|
ngAfterViewChecked
|
Called every time the view and the child views has been checked
|
|
ngOnDestroy
|
Called once the component is about to be destroyed
|
About Author
Satwinder Singh
Satwinder had been working as a free-lancer for past 1-year and recently joined Oodles Technologies as a UI-Developer. His skills are : Jquery , Html , Css , Bootstrap and Javascript.