Component Lifecycle | Hooks in Angular

• Angular application does not use all the components at once. It only uses the one or more which are required.
• Whenever angular needs to use a component, it creates a new instance of that component and starts using it in DOM.
• Once the use is done, angular destroys this instance and removes from DOM
• During this process (create an instance to destroy), there are several stages that angular covers and this is called as Component Lifecycle | Hooks.
• 
  
  

 Creation              => Constructor => Instantiate the component

Change Detection => ngOnInit => Runs once after Angular has initialized all the component's inputs

                                    ngOnChanges =>Runs every time the component's inputs have changed.

                                    ngDoCheck => Runs every time this component is checked for changes.

                                  ngAfterContentInit=> Runs once after the component's content has been initialized.

                                    ngAfterContentChecked=>Runs every time this component content has been                                                                                                checked for changes.

                                    ngAfterViewInit=> Runs once after the component's view has been initialized.

                                    ngAfterViewChecked => Runs every time the component's view has been checked                                                                                  for changes.ngAfterViewCheckedngAfterView Checked

Rendering            =>afterNextRender         =>Runs once the next time that all components have been                                                                                                rendered to the DOM.

                                  afterRender => Runs every time all components have been rendered to the DOM.

Destruction =>     ngOnDestroy =>  Runs once before the component is destroyed.

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

export class TestComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked {

  constructor(){

    console.log("Constructor")

  }

  ngAfterViewChecked(): void {

   console.log("AfterViewChecked ");

   

  }

  ngAfterViewInit(): void {

    console.log("AfterViewInit");

   

  }

  ngAfterContentChecked(): void {

    console.log("AfterContentChecked");

   

  }

  ngAfterContentInit(): void {

    console.log("AfterContentInit")

  }

  ngOnInit(): void {

    console.log("ngOnInit")

  }

  ngDoCheck(): void {

    console.log("DoCheck")

  }

}

NgOnChanges

export class ChildComponent implements OnChanges {

 

  @Input() data=0;

  ngOnChanges(changes: SimpleChanges): void {

    if(changes['data']){

      console.log('Previous', changes['data'].previousValue);

      console.log('Current', changes['data'].currentValue);

    }

  }

}

<p>child works!</p>

Value is = {{data}}

export class ParentComponent {

  ParentMessage =2;

  onChanges(){

    this.ParentMessage = 3;

  }

}

<p>parent works!</p>

<app-child [data]="ParentMessage"></app-child>

<button (click)="onChanges()">Check chenges</button>