Sharing data between components in Angular is one of the most important part to understand. We are going to learn how to pass data from one component to another component using @Input
, @Output
and EventEmitter
in Angular app.
Let’s discuss different methods of sharing data in any angular application. We will focus on these methods:
@Input
: sharing data from parent to child@ViewChild
: sharing data from child to parent@Output & EventEmitter
: sharing data from child to parent
Method 1: Parent to Child using @Input
This is the most common method of sharing data in Angular application. We will use @Input() decorator to pass data. Create a parent component named app-parent
in your app folder. Use this command to generate the component:
Creating parent component
ng g c parent
parent.component.ts
Now, let’s create child component named app-child
using this command in your app folder.
Creating child component
ng g c child
child.component.ts
Till now, we have just created our parent and child components in our app. Let’ see how to pass data between them. Import the Input
decorator in line 1 of child.component.ts
file.
Add appChildMessage
property with @Input()
decorator in same file.
Add this line to child.component.html
file.
Now, let’s add these lines to parent component.
parent.component.ts
parent.component.html
So, the complete code would be like this.
parent.component.ts
parent.component.html
child.component.ts
child.component.html

Method 2: Child to Parent using @ViewChild()
Using @ViewChild() decorator, we can inject one component to another, giving the parent access to its attributes and functions.
Note: Child won’t be available until after the view has been initialized. So, we need to implement the AfterViewInit lifecycle hook to receive the data from the child.
Let’s look at our parent component code. Write these lines in parent component.
parent.component.ts
Implement the AfterViewInit
in component class.
Add these lines in component class file.
Let’s look at complete code.
parent.component.ts
parent.component.html
child.component.ts

Method 3: Child to Parent using @Output
and EventEmitter
In this method, child component will emit the data, which will be listen by parent component. This ideal condition for this approach is when you want to share some data on some events like button clicks, users and other form related events.
Use this link to read more about @Output and EventEmitter.
We are going to create a function in the parent to receive the message and set it equal to the message variable. Also, we are going to declare a messageEvent
variable with the Output
decorator and set it equal to a new event emitter. Then we will have a function named sendMessage
that calls emit on this event with the message we want to send. At the end, we will create a button to trigger this function.
Let’s look at complete code.
parent.compoent.ts
parent.component.html
child.component.ts
child.component.html

Summary
In our post, we have learned about how to share data between parent and child components using @Input(), @Output and EventEmitter. Data sharing is very important concept, and everybody needs to share data between application’s components.
Thanks for the detailed explanation. Please can you explain, How to share the data between child to child?
Hi Ranjit thanks for ur reply. You can use eventemitter to share data between child components, which I mentioned in my blog as well.
Thank you Adesh..!! Have a good day.
Welcome Ranjit
Pingback: itemprop="name">Single Page Application using Asp.Net Core 2.2 and Angular - ZeptoBook
Pingback: itemprop="name">JavaScript Fundamentals Every Beginner Should Know - ZeptoBook
Pingback: itemprop="name">Eleven Ways To Learn Javascript Array Iteration Effectively - ZeptoBook
Pingback: itemprop="name">Pipes in Angular - ZeptoBook