Angular Lifecycle Hooks

Angular Lifecycle Hooks are the different phases of the component from its creation to its destruction where we can attach our functions that will occur during the occurrence of that particular phase.

A component has a lifecycle managed by Angular.

Angular creates a component, renders it , creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

These lifecycle hooks are the places that provide visibility into these key life events and the ability to act when they occur.

A directive also has these same set of lifecycle hooks.

These lifecycle hooks are the interfaces present in Angular core library. To attach a method to the lifecycle hook you can implement one or more of these hooks. Each interface has a single hook method whose name is the interface name prefixed with?ng.?

The sequence of the Lifecycle hooks:

ngOnChanges():

This lifecycle hook keeps track of the set and reset of the data-bound input properties. The method receives a SimpleChanges object of the current and the previous property values. It is called before ngOnInit() and whenever one or more data-bound input properties change.

ngOnInit():

It initialises the component/directive after angular first displays the data-bound properties and sets the component's/directive's input properties. It is called only once and after the first occurrence of the ngOnChanges().

ngDoCheck():

It detects and acts upon the changes that Angular can't detect on its own. It is called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit():

It responds after Angular projects external content into the components view or in the view a directive is in. It is called once after the first ngDoCheck().

ngAfterContentChecked():

It responds after Angular checks the content projected into the directive/component. It is called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit():

It responds after Angular initialises the component's views and child views or the view that a directive is in. It is called once after the first ngAfterContentChecked().

ngAfterViewChecked():

It responds after Angular checks the component's views and child views or the view that a directive is in. It is called after the ngAfteViewInit() and every subsequent ngAfterContentChecked().

ngOnDestroy():

It is called to perform cleanup activities like unsubscribe observable and detach event handlers to avoid memory leaks. It is called just before Angular destroys the directive/component.

The syntax for the implementation of the life cycle hook interface is as follows:

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit, OnChanges,
 DoCheck, OnDestroy,AfterContentInit, AfterContentChecked,
 AfterViewInit, AfterViewChecked {

   ngOnChanges(){
      // some method
   }

   ngOnInit(){
      // some method
   } 

   ngDoCheck(){
      // some method
   }

   ngAfterContentInit(){
      // some method
   }

   ngAfterContentChecked(){
      // some method
   }

   ngAfterViewInit(){
      // some method
   }

   ngAfterViewChecked(){
      // some method
   }

   ngOnDestroy(){
      // some method
   }

}                                        
                           

The lifecycle hooks gives an opportunity to the developers to make their application smooth and robust.

Try out these hook's to attach your methods and events and let me know your experiences of using it. I hope it will make your coding tasks a lot more easier. Feel free to drop your suggestions and experiences with the angular lifecycle hooks.