Component Communication in Angular

Today I hoped to write about a problem which has bothered me when I started learning Angular as a beginner a while ago. ( FYI if you are a beginner to Angular I suggest getting some basic understanding before going through this article :) )

As you already know the basic building block of Angular is Components. In simpler terms, Components are reusable chunks of “View”s which are used to create an angular application. Any angular application will contain at least more than one Component in it while a complex application may contain hundreds of different components which ultimately results in the application. As a beginner, I always wondered how these components “talked” or communicated with each other.

Component Hierarchy

Before going to component communication, let me first give an insight into how the Components are structured in Angular. Angular components are structured in a tree hierarchy, that means there is one root component and inside that component, there can be many child components. Those child components also have child components and so on. Likewise, there is a whole component tree when we consider a certain Angular Application.

Component Hierarchy

When we look at the above component tree, one may wonder how a parent component interacts with a child component or how a child component sends a certain message/data to a parent component. For example, think that a parent component needs to set a variable/property inside a child component. How can we achieve that? That's when component communication comes in handy.

Component Communication

When we take component interaction, the main two scenarios are,

1. Parent to Child Dataflow
2. Child to Parent Dataflow

Parent to Child DataFlow

Parent to Child Dataflow

To fully understand this parent and child concept let’s create a new angular application with two components.

ng new TestApp
ng generate component Fruits
ng generate component Apple

Project Structure

After making this, let’s make apple component, a child of fruits component. For that, we have to put the HTML selector of apple, inside fruits and put fruits inside the app-component.

Inside app component,

<app-fruits> </app-fruits>

Inside the fruits component,

<app-apple> </app-apple>

Let’s modify the application a little so that we can demonstrate the component communication properly.

Fruits Component Template

Apple Component Template

Let’s say that the variable var_3 which is inside the apple component needs to be set by the input which is located inside the fruits component. To achieve this, we will need a data flow from the parent “Fruits” component to the child “Apple” component.

For this, we shall need to set that variable, a custom input property of the <app-fruits> tag. For this purpose Angular team has introduced a handy decorator “@Input”. A property of a class can be decorated with “@Input” to make it an input property of that certain class. Let’s see how that can be done.

Decorate the var_3 variable with @Input()

That’s it ! Now if you go to the fruits component and look at the selector of the apple component inside it, you can see a custom property [var_3] !

Now set the user input taken from the ngModel inside the as the resource of that property.

<app-apple [var_3]="var_1"> </app-apple>

Here is the result,

After Setting the Dataflow

You can learn more about the Angular Input Decorator from here.

Child to Parent DataFlow

Now let’s talk about how the child component can transfer its data to the parent component. For this Angular has introduced its “@Output” decorator, but it is a little tricky than the “@Input”.

To transfer its data to the parent, the child element needs to inform the parent that something is changed. For that purpose, we have set an output property in the type of EventEmmiter. Then we can catch that event from the parent component and get the value of the data which was passed. Let’s see how it is done.

First, declare the var_2 of the child component as an Output.

@Output() var_2 = new EventEmitter<string>();

Here you will need to give the type of the event as a string since we are catching the typed words, but it can be changed according to your application.

Then create a method to catch the user input which is given to the input element inside the child template and use the emit method of the EventEmmiter object to emit that value.

Inside Child Template

Inside Child Component

Now if you look at the child component selector inside the parent, you can see a new event called var_2!

Inside Parent Template

After this, you just have to get the value from that “var_2” event you just created from a method.

Inside Parent Template

Inside Parent Component

Now you are done! Here is the final result.

Now you know the basics of component communication in Angular !!!

You must remember that these are only two basic methods to do component interaction. There are various other methods such as using services etc. We will talk about them in a later article.

The full project is available in my GitHub. :) Feel free to fork it. If you have any question feel free to comment.

ravindurashmin/Angular-Component-Communication

Ravindu Rashmin - Final Year Undergraduate - University of Moratuwa