Passing data between components in angular 6 (Examples)?

Angular has a plug and play like structure as different part of an application can have different components. Passing data between components in angular is obvious while working on the angular project.

The flow of the data among the components can be on different directions based on the requirement of the project. Child component to Parent component or Parent Component to Child component.

In this tutorial, we will see the two different methods of passing data between components. So let’s discuss about them.

1. Passing data from Parent Component to Child Component using @Input()

In angular we have @Input() property for passing data from parent component to the child component.

I have created a new angular project and added two different components named as parent component and child component. The project folder structure looks as below.

The @Input() decorator is used to configure the input properties of the component and plays a great role in passing data between components in angular.

Let’s say I want to display the value in parent component to be displayed to the child component then I use can transmit the value from parent component to the child component with the help of @Input() decorator and property binding.

This is the part of code in parent component.

The parent component on the above code has the “message” property. To display that message property on the child component I am using [] bracket to bind that “message” property with “MessageFromParent”.

Keep in mind that the binding work is happening inside the opening tag of <app-childcomponent>.

Now let’s see how you can retrieve that value on the child component.

The @Input() decorator is imported from ‘@angular/core’ and used to retrieve the “MessageFromParent” that is being passed to the child component from the template of parent component.

Now you can bind the property “MessageFromParent” on the template of child component which is the reference of the “message” property on the parent component.

2. Passing data from Child Component to Parent Component using @Output() and EventEmitter

Now if the parent component wants the message back from the child component then we can use @Output() decorator.

However the @Output() decorator must be used with an event. The EventEmitter object will be used to emit the event and transmit the message back.

The child component after the use of @Output() decorator looks like this.

In this code, the @Output() decorator and EventEmitter object are imported from ‘@angular/core’.After that the @Output() decorator is declared as the type of EventEmitter.

On the initialization of the component the event get emitted along with the message from child component.

Now let’s see how we can capture the message back to the parent component.

The first thing that we see here is this line of code on the template part.

(MessageFromChild)=”OnMessageFromChild($event)”

Here (MessageFromChild) is the same that we have declared on the child component along with @Output() decorator. “OnMessageFromChild($event)” is the name of method that we have implemented later on the parent component.

The OnMessageFromChild method on the parent component automatically gets fired as soon as the event get emit on the child component.

So the logic is, the changes on the values of the property gets automatically updated.

Finally, If you run these code the result on the browser looks like this.

Beside these two methods, there are other ways too for passing data between components in angular. I will cover them on upcoming tutorials.

Hope this helps you.

About dipneupane

Dip is a passionate Software Developer based in Kathmandu, Nepal. He chew code and smash keyboard for living. Apart from that, he writes about almost everything on buzzedcode.com.

View all posts by dipneupane →

Leave a Reply

Your email address will not be published. Required fields are marked *