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

DZone 's Guide to

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.

· Web Dev Zone ·
Free Resource


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.


  • 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:


Step 2

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


Step 3

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



Step 4

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


Step 5

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


Step 6

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


this.child.productInChild - This line of code accesses data from the child component and sends it to the parent component variable.


 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.

angular 8, child, data binding, parent, tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}