In this post, 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
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 g c parent
Step 3
Now open the parent.component.html file and add the following code in the file:
<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:
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 - T_his line of code accesses data from the child component and sends it to the parent component variable.
Conclusion
I hope you have enjoyed this post as much as I have enjoyed writing and coding the examples. Thank you!
#angular #angular 8 #@viewchild