Sharing Data from Child to Parent in Angular 8 Using @viewchild
Sharing Data from Child to Parent in Angular 8 Using @viewchild
Struggling to understand Angular's bidirectional data-flow? See this easy-to-follow tutorial to understand how to share data from a child to parent component.
Join the DZone community and get the full member experience.
Join For FreeIntroduction
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:
xxxxxxxxxx
ng new sharingData
Step 2
Now, let's create a parent component using the following command:
xxxxxxxxxx
ng g c parent
Step 3
Now open the parent.component.html file and add the following code in the file:
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:
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.
xxxxxxxxxx
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.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}