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, or 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.

ng new sharingData

Step 2. Now, let's create a parent component using the following command.

ng new sharingData

Step 3. Now open the parent.component.html file and add the following code to the file.

<p class="card">
    <p class="card-body pb-0">
        <h4 style="text-align: center;">Example of Angular Nested Grid</h4>
        <p class="row">
            <p class="col-12 col-md-12">
                <p class="card">
                    <p class="card-body position-relative">
                        <p 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>
                        </p>
                    </p>
                </p>
            </p>
        </p>
    </p>
</p>
<app-child></app-child>

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

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.

ng g c child

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

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.