Angular Component Life Cycle

 The different stages of component execution is called "component life cycle"

 1.creating the component instance
 2.rendering the component template[executing databinding   expression,directives,..]
 3.creates and renders component children 
 4.checks for input property changes
 5.destroying component

The methods which will be executed automatically in different stages
of component execution is called "component life cycle methods | events | hooks


ngOnChanges Event

This will be executed whenever input property value changes, this will receive
SimpleChanges object with old and new value.


ngOnInit Event

This will be executed after 1st execution of ngOnChanges method and
constructor, this can be used to read input property value (or)
subscribing to observable.
              
This will be executed only once compare to ngonchanges

Called once the component is initialized.


ngOnDestroy Event

This will be executed before destroying the component, this can be used
to release memory resources before component destruction.

ngAfterViewInit

Called after the component’s view and child views has been initialized

ngAfterViewCheck

Called after the component’s view and child views has been checked

ngAfterContentInit
Called after a content (ng-content) has been projected into view.

ngAfterContentCheck

Called every time the projected content has been checked


Example










.ts Changes


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

@Component({
  selector: 'app-lifecyclehooks',
  templateUrl: './lifecyclehooks.component.html',
  styleUrls: ['./lifecyclehooks.component.css']
})
export class LifecyclehooksComponent implements   
OnInit  
,OnChanges   
,DoCheck  
,AfterContentInit  
,AfterContentChecked  
,AfterViewInit  
,AfterViewChecked  
,OnDestroy  {
  
  name: string =''; 
  constructor() {  
    console.log('Constructor Called');  
   }  
  
  ngOnInit() {  
    console.log('ngOnInit Called');  
  }  
  
  ngOnChanges(){  
    console.log('ngOnChanges Called');  
  }  
  
  ngDoCheck(){  
    console.log('ngOnDoCheck Called');  
  }  
  
  ngAfterContentInit(){  
    console.log('ngAfterContentInit Called');  
  }  
  
  ngAfterContentChecked(){  
    console.log('ngAfterContentChecked Called');  
  }  
  
  ngAfterViewInit(){  
    console.log('ngAfterViewInit Called');  
  }  
  
  ngAfterViewChecked(){  
    console.log('ngAfterViewChecked Called');  
  }  
  
  ngOnDestroy(){  
    console.log('ngOnDestroy Called');  
  }  
}


.html Changes

<h1>Life Cycle Hooks Example</h1>  
<br>  
<input type="text" class="forms-contrl" [(ngModel)]="name">  
<p>{{name}}</p>


Output in Console Log
























On entering the text in the textbox, the below events get triggered




















2 Example

Create a component and a service













.myService.ts Changes


import { Observable } from "rxjs";

export class Myservice {
    getprods()
    {
        let obj=new Observable((observer)=>{
            //write unit of code for async exec
            let prods:string[]=["htc","samsung","dell"];
            observer.next(prods);
            observer.complete();
        }); 
        return obj;//returning observable object to a component,
            //component will register callback funcs to observable 
            //using subscribe method,this callback funcs can be called 
            //using observer.next,..
    }
}


component.ts 


import { Component, OnDestroy, OnInit } from '@angular/core';
import { Myservice } from './myservice';
@Component({
  selector: 'app-observabledemo',
  templateUrl: './observabledemo.component.html',
  styleUrls: ['./observabledemo.component.css']
})
export class ObservabledemoComponent implements OnInit,OnDestroy {
  obj:Myservice;
  obsref:any;
  prods:any | undefined;
  constructor() {
    this.obj=new Myservice();
   }
  ngOnInit():void
  {
    this.obsref=this.obj.getprods().subscribe(data => this.prods = data);
  }
  ngOnDestroy(): void 
  {
  this.obsref.unsubscribe();  
  }
}





.html


<ul style="font-size:x-large">
    <li *ngFor="let p of prods">
        {{p}}
    </li>
    </ul>


Output