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:
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().