Sharing Data from Child to Parent in Angular 8 Using @viewchild

Introduction

 
In this article, we are going to learn how to share data from child to parent component in Angular 8 using @ViewChild.
 

What is a @ViewChild ?

 
A ViewChild is a component if we want to access a child component, directive, DOM element inside the parent component, we use the decorator @ViewChild() in Angular.
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
 
Let's create a new Angular project using the following NPM command:
  1. ng new sharingData  
Step 2
 
Now, let's create a parent component using the following command:
  1. ng g c parent 
Step 3
 
Now open the parent.component.html file and add the following code in the file:
  1. <div class="card">    
  2.     <div class="card-body pb-0">    
  3.         <h4 style="text-align: center;">Example of Angular Nested Grid</h4>    
  4.         <div class="row">    
  5.             <div class="col-12 col-md-12">    
  6.                 <div class="card">    
  7.     
  8.                     <div class="card-body position-relative">    
  9.                         <div class="table-responsive cnstr-record product-tbl">    
  10.                             <table class="table table-bordered heading-hvr">    
  11.                                 <thead>    
  12.                                     <tr>    
  13.     
  14.                                         <th width="50">Art.No    
  15.                                         </th>    
  16.                                         <th>Brand</th>    
  17.                                         <th>    
  18.                                             Price/Unit</th>    
  19.                                         <th>Provider</th>    
  20.                                         <th>P. Art. N</th>    
  21.                                         <th>S. A/C</th>    
  22.                                         <th>Buy A/C</th>    
  23.                                     </tr>    
  24.                                 </thead>    
  25.     
  26.                                 <tbody *ngFor="let product of productInParent; let i = index">    
  27.     
  28.                                     <tr>    
  29.     
  30.                                         <td align="center">{{product.ArtNo}}</td>    
  31.                                         <td>{{product.Brand}}</td>    
  32.                                         <td>{{product.Price }}</td>    
  33.                                         <td>{{product.Provider}}</td>    
  34.                                         <td>{{product.ProviderArtNo}}</td>    
  35.                                         <td>{{product.SalesAccount}}</td>    
  36.                                         <td>{{product.BuyAccount}}</td>    
  37.                                     </tr>    
  38.     
  39.     
  40.                                 </tbody>    
  41.                             </table>    
  42.                         </div>    
  43.                     </div>    
  44.                 </div>    
  45.             </div>    
  46.         </div>    
  47.     </div>    
  48. </div>    
  49. <app-child></app-child>    
Step 4
 
Next, open the parent.component.ts file and add the following code in this file:
  1. import { Component, ViewChild, AfterViewInit } from '@angular/core';  
  2. import { ChildComponent } from "../child/child.component";  
  3.   
  4. @Component({  
  5.   selector: 'app-parent',  
  6.   templateUrl: './parent.component.html',  
  7.   styleUrls: ['./parent.component.css']  
  8. })  
  9. export class ParentComponent implements AfterViewInit {  
  10.   
  11.   @ViewChild(ChildComponent) child;  
  12.   
  13.   constructor() { }  
  14.   
  15.   productInParent=[];  
  16.   
  17.   ngAfterViewInit() {  
  18.     this.productInParent = this.child.productInChild;  
  19.   }  
  20. }  
Step 5
 
Let's create one more component called child using the following command.
  1. ng g c child  
Step 6
 
Add the following code inside of the child.component.ts file
  1. import { Component} from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-child',  
  5.   template: `  
  6.   `,  
  7.   styleUrls: ['./child.component.css']  
  8. })  
  9. export class ChildComponent {  
  10.   
  11.   productInChild=[];  
  12.   
  13.   constructor() {   
  14.     this.getProducts();  
  15.   }  
  16.   
  17.     public getProducts() {  
  18.     this.productInChild = [  
  19.       {  
  20.         ProductId: 1,  
  21.         ArtNo: "100",  
  22.         Provider: "OppoProvider",  
  23.         ProviderArtNo: "1Yu",  
  24.         Brand: "Oppo",  
  25.         Price: 7810.23,  
  26.         BuyAccount: "123",  
  27.         SalesAccount: "321"  
  28.       },  
  29.       {  
  30.         ProductId: 1,  
  31.         ArtNo: "101",  
  32.         Provider: "OppoProvider",  
  33.         ProviderArtNo: "1Yu",  
  34.         Brand: "Oppo",  
  35.         Price: 2310.23,  
  36.         BuyAccount: "123",  
  37.         SalesAccount: "321"  
  38.       },  
  39.       {  
  40.         ProductId: 1,  
  41.         ArtNo: "102",  
  42.         Provider: "OppoProvider",  
  43.         ProviderArtNo: "1Yu",  
  44.         Brand: "Oppo",  
  45.         Price: 7810.23,  
  46.         BuyAccount: "123",  
  47.         SalesAccount: "321"  
  48.       },  
  49.       {  
  50.         ProductId: 1,  
  51.         ArtNo: "103",  
  52.         Provider: "OppoProvider",  
  53.         ProviderArtNo: "1Yu",  
  54.         Brand: "Oppo",  
  55.         Price: 5810.23,  
  56.         BuyAccount: "123",  
  57.         SalesAccount: "321"  
  58.       }  
  59.     ];  
  60.   }  
  61. }  
this.child.productInChild - This line of code accesses data from the child component and sends it to the parent component variable.
 

Conclusion

 
I hope you have enjoyed this article as much as I have enjoyed writing and coding the examples.
 
Please let me know how to improve it.