Overview Of Angular 2 Lifecycle Hooks

Every angular application goes through a lifecycle from the initialization till the end of that application. A component and a directive have the same lifecycle managed by the angular. There are eight stages in the lifecycle and every stage is known as the lifecycle hook event.

Every component must have a constructor and it gets executed before any other lifecycle hook event.

Before going deeper into the lifecycle of angular, let us first recall components and directives once.

Components are the main building block of any angular application. The concept of controllers, scope and directives of angular js 1 are replaced by components and directives in angular 2. Data, logic and custom elements can be added to the application by using components in Angular 2.

Next, come to directives any HTML element which is used for extending the power of the customizable HTML element is termed as the directive.

Types of directives:-

• The Structural directives change the layout of DOM by addition or deletion of elements.

• The attribute directives change the behavior and appearance of any HTML element.

Lifecycle Hooks Sequence:-

Let’s have a look at the sequence of various methods of lifecycle hook:

After the creation of directives or components by using constructor, Angular calls the methods in the sequence shown in the diagram - 

ngOnChanges() -

It is called first in the lifecycle hook of Angular whenever the value of any input control changes. It always receives a map containing the previous and current values.

ngOnInit() -

It is called after ngOnChanges for the initialization of directive/component.

ngDoCheck() -

It checks the changes that angular won’t check on its own. It runs immediately after ngOnChanges() and ngOnInit().It allows us to run our own algorithm to detect the change.

ngAfterContentInit() -

It is called after the content projection performed by the angular into the component’s view.

ngAfterContentChecked() -

It is called when the content has been checked by the change detection method of angular.

ngAfterViewInit() -

It is called after the initialization of the component’s view fully.

ngAfterViewChecked() -

It is called when the view has been checked by the change detection method of angular.

ngOnDestroy() -

It is called before angular destroys any component and it detaches event handlers to avoid memory leaks. 

Summary

In this way, by using lifecycle hook you can tune the behavior of components while its creation, updation, and deletion.

Most often we use ngOnInit() as this is the only place where we define the initialization logic of components.

And this is preferred over constructor for initialization as in constructor we can’t access input properties.

The next common hook of the lifecycle is ngOnChanges() where we get the details of changes in input properties.