ngAfterViewInit added

Author: geeksarray

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

@@ -1,12 +1,13 @@
 import { Component, OnInit, OnChanges, Input, Output, EventEmitter, SimpleChanges, 
-      DoCheck, AfterContentInit, AfterContentChecked  } from '@angular/core';
+      DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit  } from '@angular/core';
 
 @Component({
   selector: 'app-product-details',
   templateUrl: './product-details.component.html',
   styleUrls: ['./product-details.component.css']
 })
-export class ProductDetailsComponent implements OnInit, OnChanges, DoCheck,AfterContentInit, AfterContentChecked  {
+export class ProductDetailsComponent implements OnInit, OnChanges, DoCheck,AfterContentInit, 
+    AfterContentChecked, AfterViewInit  {
 
   constructor() { }
   @Input() SalesRating:number = 3.5;  
@@ -26,10 +27,14 @@ export class ProductDetailsComponent implements OnInit, OnChanges, DoCheck,After
     console.log("4 .after content init from child");
   }
 
-  ngAfterContentChecked(): void{
+   ngAfterContentChecked(): void{
     console.log("5. ngAfterContentChecked from child.");
    }
 
+   ngAfterViewInit(): void{
+    console.log("6. ngAfterViewInit from child.");
+   }
+
   onClick():void{  
     this.GetLocalSales.emit(`The local sales report for this product is ${this._salesRating}`);  
   } 
@@ -51,7 +56,6 @@ export class ProductDetailsComponent implements OnInit, OnChanges, DoCheck,After
       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,20 +1,17 @@
 import { Component, OnInit,SimpleChanges, OnChanges, DoCheck, 
-    AfterContentInit,  AfterContentChecked  } from '@angular/core';
+    AfterContentInit,  AfterContentChecked, AfterViewInit  } from '@angular/core';
 
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.css']
 })
 
-export class ProductsComponent implements OnInit, OnChanges, DoCheck,AfterContentInit, AfterContentChecked {
+export class ProductsComponent implements OnInit, OnChanges, DoCheck,AfterContentInit,
+  AfterContentChecked, AfterViewInit {
 
   constructor() { }
 
-  ngOnInit(): void {
-    console.log("2. ngOnInit called from parent.");
-  }
-
   ngOnChanges(changes: SimpleChanges) : void{
     for (const propName in changes) {
       const chng = changes[propName];
@@ -24,6 +21,10 @@ export class ProductsComponent implements OnInit, OnChanges, DoCheck,AfterConten
     }
     console.log("1. ngOnChanges called from parent.");
  }
+
+ ngOnInit(): void {
+  console.log("2. ngOnInit called from parent.");
+}
 
  ngDoCheck(): void {
   console.log("3. doCheck is called from parent.") ;
@@ -37,6 +38,10 @@ export class ProductsComponent implements OnInit, OnChanges, DoCheck,AfterConten
   console.log("5. ngAfterContentChecked from parent.");
  }
 
+ ngAfterViewInit(): void{
+  console.log("6. ngAfterViewInit from parent.");
+ }
+
   messageFromNestedComponent = '';       
    onGetLocalSalesReport(message:string) : void {           
       this.messageFromNestedComponent = 'Product Details Report: ' + message;