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
