DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • SRE vs. DevOps
  • Reactive Programming
  • Building a Flask Web Application With Docker: A Step-by-Step Guide
  • Chaining API Requests With API Gateway

Trending

  • SRE vs. DevOps
  • Reactive Programming
  • Building a Flask Web Application With Docker: A Step-by-Step Guide
  • Chaining API Requests With API Gateway
  1. DZone
  2. Data Engineering
  3. Data
  4. Sharing Data from Child to Parent in Angular 8 Using @viewchild

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

Siddharth Gajbhiye user avatar by
Siddharth Gajbhiye
CORE ·
Jul. 06, 20 · Tutorial
Like (3)
Save
Tweet
Share
6.82K Views

Join the DZone community and get the full member experience.

Join For Free

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
1
 
1
ng new sharingData  


Step 2

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

TypeScript
xxxxxxxxxx
1
 
1
ng g c parent


Step 3

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

HTML
xxxxxxxxxx
1
49
 
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:

TypeScript
xxxxxxxxxx
1
20
 
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.

TypeScript
xxxxxxxxxx
1
 
1
ng g c child  


Step 6

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

TypeScript
x
61
 
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.

AngularJS Data (computing)

Opinions expressed by DZone contributors are their own.

Trending

  • SRE vs. DevOps
  • Reactive Programming
  • Building a Flask Web Application With Docker: A Step-by-Step Guide
  • Chaining API Requests With API Gateway

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: