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 by 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

Now, 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 by using the following command.

 

1. ng g c child  

 Step 6

   Add the following code inside 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 access the data from child component and send it to 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.