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

Siddharth Gajbhiye

Jul. 06, 20 · Tutorial

8.0K Views

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:

    TypeScript
   
xxxxxxxxxx

ng new sharingData

Step 2

Now, let's create a parent component using the following command:

    TypeScript
   
xxxxxxxxxx

ng g c parent

Step 3

Now open the parent.component.html file and add the following code in the file:

    HTML
   
 

     
    
xxxxxxxxxx

            
          
<div class="card">    
    <div class="card-body pb-0">    
        <h4 style="text-align: center;">Example of Angular Nested Grid</h4>    
        <div class="row">    
            <div class="col-12 col-md-12">    
                <div class="card">    
    
                    <div class="card-body position-relative">    
                        <div class="table-responsive cnstr-record product-tbl">    
                            <table class="table table-bordered heading-hvr">    
                                <thead>    
                                    <tr>    
    
                                        <th width="50">Art.No    
                                        </th>    
                                        <th>Brand</th>    
                                        <th>    
                                            Price/Unit</th>    
                                        <th>Provider</th>    
                                        <th>P. Art. N</th>    
                                        <th>S. A/C</th>    
                                        <th>Buy A/C</th>    
                                    </tr>    
                                </thead>    
    
                                <tbody *ngFor="let product of productInParent; let i = index">    
    
                                    <tr>    
    
                                        <td align="center">{{product.ArtNo}}</td>    
                                        <td>{{product.Brand}}</td>    
                                        <td>{{product.Price }}</td>    
                                        <td>{{product.Provider}}</td>    
                                        <td>{{product.ProviderArtNo}}</td>    
                                        <td>{{product.SalesAccount}}</td>    
                                        <td>{{product.BuyAccount}}</td>    
                                    </tr>    
    
    
                                </tbody>    
                            </table>    
                        </div>    
                    </div>    
                </div>    
            </div>    
        </div>    
    </div>    
</div>    
<app-child></app-child>   

Step 4

Next, open the parent.component.ts file and add the following code in this file:

    TypeScript
   
xxxxxxxxxx

import { Component, ViewChild, AfterViewInit } from '@angular/core';  
import { ChildComponent } from "../child/child.component";  
  
@Component({  
  selector: 'app-parent',  
  templateUrl: './parent.component.html',  
  styleUrls: ['./parent.component.css']  
})  
export class ParentComponent implements AfterViewInit {  
  
  @ViewChild(ChildComponent) child;  
  
  constructor() { }  
  
  productInParent=[];  
  
  ngAfterViewInit() {  
    this.productInParent = this.child.productInChild;  
  }  
}

Step 5

Let's create one more component called child using the following command.

    TypeScript
   
xxxxxxxxxx

ng g c child

Step 6

Add the following code inside of the child.component.ts file

    TypeScript
   
 

     
    
x

            
          
import { Component} from '@angular/core';  
  
@Component({  
  selector: 'app-child',  
  template: `  
  `,  
  styleUrls: ['./child.component.css']  
})  
export class ChildComponent {  
  
  productInChild=[];  
  
  constructor() {   
    this.getProducts();  
  }  
  
    public getProducts() {  
    this.productInChild = [  
      {  
        ProductId: 1,  
        ArtNo: "100",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 7810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "101",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 2310.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "102",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 7810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "103",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 5810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      }  
    ];  
  }  
}  

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.

AngularJS Data (computing)

Opinions expressed by DZone contributors are their own.