In this article, we will know about the lifecycle of Angular components. Since, in Angular, a component is the main building block of the application, it is very important to understand the lifecycle processing steps of the components so that we can understand the execution of the component in our applications.
In Angular, every component has its own life-cycle, every component goes through a number of different stages. There are 8 different stages in the Angular component lifecycle. Every stage is called as lifecycle hook event. So, we can use these hook events in different phases of our application to obtain control of the components. Since a component is a TypeScript class, every component must have a constructor method. The constructor of the component class executes, first, before the execution of any other lifecycle hook events. If we need to inject any dependencies into the component, then the constructor is the best place to inject those dependencies. After executing the constructor, Angular executes its lifecycle hook methods in a specific order.
SimpleChange
.ngOnChanges()
events. This event is mainly used for the initialize data in a component.ngDoCheck()
method. This method is basically linked with the child component initializations.ngAfterContentInit()
method. This method is also called on every subsequent execution of ngDoCheck()
. This method is also mainly linked with the child component initializations.ngAfterContentChecked()
. This lifecycle hook method only applies to components.ngAterViewInit()
method. It is executed every time the view of the given component has been checked by the change detection algorithm of Angular. This method executes after every subsequent execution of the ngAfterContentChecked()
. This method also executes when any binding of the children directives has been changed. So this method is very useful when the component waits for some value which is coming from its child components.