Angular Life cycle Hooks

Angular Life cycle​​ Hooks:

 

In Angular, each component is subject to a life cycle; the framework created it, render it, create and renders its​​ children, checks​​ it when its data-bound properties​​ change,​​ and eventually , destroys and removes it from the DOM ; most of these steps are bound to a dedicated​​ lifecycle hook, as we can see in the following overview:

 

 ​​ ​​ ​​ ​​ ​​ ​​​​ Angular​​ Lifecycle Hooks:

Constructor

 

ngOnChanges

 

ngOnInit

 

ngDoCheck

 

ngAfterContentinet

 

ngAfterContentChecked

 

ngAfterViewChecked

 

 

ngOnDestroy

 

It’s​​ important to understand that each lifecycle hook, in addition to being exposed to the developers, is also used in the Angular framework to perform required internal tasks.​​ 

With regard to the preceding diagram , the non-indented hooks are available for component and directive instances, while the indented ones are for component instance only. The reason is obvious – directives don’t have contents and views that can trigger them.

This is good to know, but what about our binding problem? What does this have to do​​ with it? We can easily answer that by taking a look at the Angular official documentation and reading wat happens during the ngOnInit lifecycle hook.

ngOnInit () : Initializes the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties. These are called once, after the first mgOnChanges().

 

(Visited 29 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *