added hook ngAfterContentChecked

Author: geeksarray

src/app/product-details/product-details.component.ts

@@ -1,25 +1,40 @@
-import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter, SimpleChanges, 
+      DoCheck, AfterContentInit, AfterContentChecked  } from '@angular/core';
 
 @Component({
   selector: 'app-product-details',
   templateUrl: './product-details.component.html',
   styleUrls: ['./product-details.component.css']
 })
-export class ProductDetailsComponent implements OnInit, OnChanges {
+export class ProductDetailsComponent implements OnInit, OnChanges, DoCheck,AfterContentInit, AfterContentChecked  {
 
   constructor() { }
   @Input() SalesRating:number = 3.5;  
   @Output() GetLocalSales: EventEmitter<string> = new EventEmitter<string>(); 
   _salesRating: string = 'Default'; 
 
   ngOnInit(): void {
+    this._salesRating = 'Default';
+    console.log("2. ngOnInit called from child.");
   }
 
+  ngDoCheck(): void {
+    console.log("3. do check is called from child .");
+  }
+
+  ngAfterContentInit(): void{
+    console.log("4 .after content init from child");
+  }
+
+  ngAfterContentChecked(): void{
+    console.log("5. ngAfterContentChecked from child.");
+   }
+
   onClick():void{  
     this.GetLocalSales.emit(`The local sales report for this product is ${this._salesRating}`);  
-} 
+  } 
 
-  ngOnChanges() : void{  
+  ngOnChanges(changes: SimpleChanges) : void{  
     if(this.SalesRating == 3.5){  
         this._salesRating = 'Good';  
     } else if (this.SalesRating == 4.0){  
@@ -29,8 +44,14 @@ export class ProductDetailsComponent implements OnInit, OnChanges {
     } else {  
         this._salesRating = 'Undefined'  
     }
- }  
 
-  
+    for (const propName in changes) {
+      const chng = changes[propName];
+      const cur  = JSON.stringify(chng.currentValue);
+      const prev = JSON.stringify(chng.previousValue);
+      //console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
+    }
 
+    console.log("1. ngOnChanges called from child.");
+ }
 }

src/app/products/products.component.ts

@@ -1,27 +1,47 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,SimpleChanges, OnChanges, DoCheck, 
+    AfterContentInit,  AfterContentChecked  } from '@angular/core';
 
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.css']
 })
-export class ProductsComponent implements OnInit {
+
+export class ProductsComponent implements OnInit, OnChanges, DoCheck,AfterContentInit, AfterContentChecked {
 
   constructor() { }
 
   ngOnInit(): void {
+    console.log("2. ngOnInit called from parent.");
   }
 
+  ngOnChanges(changes: SimpleChanges) : void{
+    for (const propName in changes) {
+      const chng = changes[propName];
+      const cur  = JSON.stringify(chng.currentValue);
+      const prev = JSON.stringify(chng.previousValue);
+      console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
+    }
+    console.log("1. ngOnChanges called from parent.");
+ }
+  
+ ngDoCheck(): void {
+  console.log("3. doCheck is called from parent.") ;
+ }
+
+ ngAfterContentInit(): void{
+  console.log("4. afterCcontent init from parent.");
+ }
+
+ ngAfterContentChecked(): void{
+  console.log("5. ngAfterContentChecked from parent.");
+ }
+
   messageFromNestedComponent = '';       
    onGetLocalSalesReport(message:string) : void {           
       this.messageFromNestedComponent = 'Product Details Report: ' + message; 
       this.products[0].AvilableQty = 1909;      
  }    
-
- EditProduct()
- {
-   alert('asde');
- }
 
   products : any[] =[ {  
       "ProductID" :1,