Angular Life Cycle Hooks - ngOnChange() vs ngDoCheck()
#angular #angularhooks #angularlifecyclehooks #ngOnChange #
Source code :- https://github.com/nilkanthshirodkar/...
In Angular, every component has a life-cycle, a number of different stages it goes through. There are 8 different stages in the component lifecycle. Every stage is called a lifecycle hook event. After executing the constructor, Angular executes its lifecycle hook methods in a specific order.
angular,angular lifecycle,angular lifecycle hooks,angular hooks,ngOnChanges,ngOnInit,ngDoCheck,ngAfterContentInit,ngAfterContentChecked,ngAfterViewInit,ngAfterViewChecked,ngOnDestroy,learn angular
l╔════════════════════════════╗
║ lifecycle hooks ║
╠════════════════════════════╣
║ ngOnChanges() ║
╠════════════════════════════╣
║ ngOnInit() ║
╠════════════════════════════╣
║ ngDoCheck() ║
╠════════════════════════════╣
║ ngAfterContentInit() ║
╠════════════════════════════╣
║ ngAfterContentChecked() ║
╠════════════════════════════╣
║ ngAfterViewInit() ║
╠════════════════════════════╣
║ ngAfterViewChecked() ║
╠════════════════════════════╣
║ ngOnDestroy() ║
╚════════════════════════════╝
ngOnChanges(changes: SimpleChanges){
console.log("Entered ngOnChanges");
console.log("ngOnChanges Started", changes);
//changes comes with current value and previous value.
}
ngOnInit(){
console.log("loads only when components get initialize");
}
ngDoCheck(){
console.log("Entered DoCheck");
console.log("DoCheck will also detect the changes made for reference type whereas ngOnChange will not detect pass by reference. ngOnChange will detect only pass by value");
}
ngAfterContentInit(){
console.log("Entered ngAfterContentInit");
console.log("executed only once after the first ngDoCheck()");
}
ngAfterContentChecked(){
console.log("Entered ngAfterContentChecked");
console.log("executed after ngAfterContentInit() and every after triggered ngDoCheck()");
}
ngAfterViewInit(){
console.log("Entered ngAfterViewInit");
console.log("Executed after the first ngAfterContentChecked()")
}
ngAfterViewChecked(){
console.log("Entered ngAfterViewChecked");
console.log("Executed after the ngAfterViewInit() and every after triggered ngAfterContentChecked().")
}
ngOnDestroy(){
console.log("When Component dom elements are removed this method will be called. Can also be used for unsubscribe")
}