Angular - Lifecycle Hooks

Introduction

Every component has a lifecycle which is supported by Angular. Lifecycle means different phases a component go through from its birth to death. We can hook into different phases of the lifecycle to have more control over the application. It's very essential to learn the order of these phases to use them wisely in our code. We need to check what triggers each phase. Angular creates a component, renders it, manages it, create and renders its children, check its data-bound properties to change and finally destroys the component before removing from the DOM. A directive has the same lifecycle as well.


Component Lifecycle Hooks

Every component and directive goes through a lifecycle when Angular creates and destroys them. We can hook into these phases through special methods. We need to add these methods in our component which will be called as per their sequence. To call any lifecycle phase, we need to implement its specific method in our component. The hooks are executed in a particular sequence which is as follows:
Lifecycle Stages
Different Lifecycle phases in sequence

Different Hooks in detail

The phases are differentiated on the basis of phases that are linked to the component itself and which are linked to the children of the component.

Constructor - This is invoked when Angular creates the component. Calling new on the component class invokes the constructor. After creating a component by calling its constructor, the lifecycle of the component or directive will start.
ngOnChanges - This method invokes when Angular sets or resets the input data-bound properties. It invokes every time when there is a change in any input property of the component or directive.  
  • This method receives a SimpleChanges object which contains previous and current values. 
  • It is called before ngOnInit().
ngOnInit - This hook is called only once after the first ngOnChanges(). This is invoked after the initialization of the component. 
  • Initialize the component after Angular first displays the data-bound properties and sets the directive/component's input properties.
  • Called only once.
ngDoCheck - This hook allows us to implement our own change detection. It will invoke when the change detector of the given component will invoke. 
  • It is called during every change detection run in Angular.
  • It allows us to write code for our own change detection implementation.
  • Run immediately after ngOnChanges() and ngOnInit().
Note: ngOnChanges() and ngDoCheck() shouldnot be implemented together on the common component.

ngDestroy - Just before destroying the component, this method is invoked. Unsubscribed observables, detach event handlers, etc is done in this method. This is called to avoid any kind of memory leak.

Hooks for the component children

These hooks are called only for the components, not for directives.

ngAfterContentInit - This hook is invoked when angular project any external content into the component view. It is also called once after the ngDoCheck().

ngAfterContentChecked - This hook is invoked each time when the content of the component is checked by Angular change detection mechanism. Called after ngAfterContentInit and after every ngDoCheck.

ngAfterViewInit - This method is invoked when angular initializes the given component and child views. It is called once after the first ngAfterContentChecked.

ngAfterViewChecked - This method will invoke each time the view of the given component is checked by Angular change detection. Called every ngAfterViewInit and every subsequent ngAfterContentChecked.

Comments