Angular Life cycle
In Angular, each component is subject to a life cycle; the framework created it, render it, create and renders its
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
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().