Angular Component Life cycle Hooks

Earlier in angular 1, we had using (ng-init), (ng-change) directives to access page initialization, change event of controller. This feature will expand in angular 2 and come up as lifecycle hooks with different phases.

So first we will know what are a Lifecycle hooks?
Lifecycle hooks are simply sequentially functions that called for specific phase of component’s life in our angular apps.

According to angular documentations lifecycle hooks are:
Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Developer can use these lifecycle hooks with component as well as directive which is managed by angular. As you all know component is a Typescript class and every component must have constructor method, before execution of any lifecycle hook event first executes constructor.

There are eight different lifecycle hooks that a developer can tap into any component or directive as per requirement.

 

 

 

 

 

 

 

 

 

These lifecycle divided into two stages:

1)For component itself (Pretty much used)

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngOnDestroy

2)For children of that component.

  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

Let’s check purpose of every lifecycle hooks sequentially

Method Purpose
ngOnChanges() Called when input value changes

Called first time before ngOnInit

ngOnInit() Called after input value set on component initialization

Called only once

Used to initialize data in component

ngDoCheck() Called to detect and to act on changes that Angular can’t or won’t detect on its own.

Called on every mouse movement

ngAfterContentInit() Called once after first ngDoCheck()

Called after content is projected in the component

ngAfterContentChecked() Called after projected content is checked
ngAfterViewInit() Called after Angular initializes the component’s views and child views.
ngAfterViewChecked() Called after Angular checks the component’s views and child views.
ngOnDestroy() Cleanup phase just before Angular destroys the directive/component.

Good hook to destroy garbage data, unsubscribe observables

Interfaces (technically optional but good if practice to add)

To use lifecycle hooks we have to implement interface function in our component class but it is optional. Each of these lifecycle has an interface and is implements by its interface on component class. Each interface defines just one lifecycle hook method and both interface and lifecycle hook method name is same only prefix”ng” added to method. Example, OnChanges interface is for ngOnChanges() method name.

Developer has to note that, the browser-based typescript compiler does not raise a compilation error when we don’t implement interface functions in our class, but in the compiling time of Typescript code, it will throw error.

Example:
First of all create one child component with @Input property Quantity and implement ngOnChanges lifecycle hook in this component:

Sample Code of child.component.html

<label>Entered Quantity :</label> {{ChangedQuantity}}

Sample Code of child.component.ts

import { Component, OnChanges, Input, SimpleChanges } from "@angular/core";

@Component({
    selector:'child-component',
    templateUrl:'child.component.html'
})

export class childComponent implements OnChanges
{
    @Input() Quantity :number = 0;
    ChangedQuantity:number;
    constructor()
    {}

    ngOnChanges()
    {
        this.ChangedQuantity = this.Quantity;
        console.log(`ngOnChanges - Quantity is change to ${this.Quantity}`)
    }    
}

Now create one lifecycle component which is work as parent component, we will use child component here to implements ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewCheck, ngOnDestroy lifecycle hooks, I had declared both component in my module and also added for routing.

Sample Code of life-cycle.component.html

<div class="row">
    <span class="setup"> Quantity</span>
    <input class="punchline" [(ngModel)]="Quantity">
</div>    
<div class="row">
     <child-component [Quantity]="Quantity"></child-component>
</div>
<div class="row">
    <button type="button" class="Savebtn" (click)="OnAdd()">
      Add 
    </button>
    <button type="button" class="cancelbutton marginleft10" (click)="Clear()">
      Clear 
    </button>
</div>

Sample Code of life-cycle.component.ts

import { Component, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, 
    AfterViewInit, OnDestroy, AfterViewChecked } from "@angular/core";

@Component({
    templateUrl:'life-cycle.component.html'
})

export class LifeCycleComponent implements OnInit,DoCheck,
        AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy
{
    Quantity:number = 10;
    DoCheckCount:number = 0;
    AfterContentCheckCount:number = 0;
    AfterViewCheckCount :number = 0;
    constructor()
    {
        console.log(`Quantity on page initialization is ${this.Quantity}`)
    }
    
    ngOnInit()
    {
        this.Quantity = 20;
        console.log(`ngOnInit - Quantity is ${this.Quantity}`)
    }
    ngDoCheck(){
        this.DoCheckCount++;
        console.log(`ngDoCheck count : ${this.DoCheckCount}`)
    }
    ngAfterContentInit(){
        console.log("ngAfterContentInit")
    }
    ngAfterContentChecked(){
        this.AfterContentCheckCount++;
        console.log(`ngAfterContentChecked count : ${this.AfterContentCheckCount}`)
    }
    ngAfterViewInit(){
        console.log("ngAfterViewInit")
    }
    ngAfterViewChecked(){
        this.AfterViewCheckCount++;
        console.log(`ngAfterViewChecked count : ${this.AfterViewCheckCount}`)
    }
    ngOnDestroy(){
        console.log("ngOnDestroy")
    }
    OnAdd()
    {
        this.Quantity += 25;
    }
    Clear()
    {
        this.Quantity = 0;
    }
}

Here we go to run application and design will look decent.

Output:

 

 

 

In console we can see on component initialization, Quantity is 10. Once ngOnInit() lifecycle called, Quantity changed to 20  which called another lifecycle ngOnChanges() fired which is in child component and displayed in result. ngAfterContentInit() and ngAfterViewInit() will call once page initialization and above lifecycle implementation complete in sequence. As we know ngDoCheck(), ngAfterContentChecked() and ngAfterViewChecked() called on every mouse movements on screen will displayed its count is increased by checking itself on parent component.

Now on click Add or clear button, we can see ngOnChanges() fires due to change quantity input value and detected by event.

 

 

 

 

 

 

 

 

Bounty: SimpleChanges
SimpleChanges is a class that can be used into in ngOnChanges that will give you details on input value change. On change input value below property values we can get.

  1. previousValue : The value before the change
  2. currentValue : The new value after the change
  3. firstChange : A boolean value set to true it is the first change for the input value.

So here it will write like this:

ngOnChanges(changes: SimpleChanges)
    {
        this.ChangedQuantity = this.Quantity;
        if(changes.Quantity.currentValue >> changes.Quantity.previousValue){
            console.log('Quantity changed from: ' + changes.Quantity.previousValue + ' to ' + changes.Quantity.currentValue);
          }
    }

Conclusion:

So here we are learn about what are angular component lifecycle hooks, the sequence in which lifecycle event fired and a way to leverage those events. Choice of lifecycle based on requirement is create component’s life experience good. Whatever you define that lifecycle only fired.