3 ways to communicate between Angular components

This article is written for Angular 2+. At the time of writing the latest version was Angular 4.

Update (June 2019): Still valid for Angular 8

It’s written for beginners — if you are an advanced or intermediate Angular developer you probably already know all these techniques.

Edit: Although, the title of this article is a bit misleading because we do not want to communicate between components directly. Our components should be isolated and encapsulated. I chose this title because I think developers struggling with this will be googling it this way.

How to communicate between components? This is the topic I’ve seen many new Angular developers to struggle with. I will show you the three most common approaches, with examples that fit different use cases.

There is also the “redux way,” which I could cover in another article in the future.

Imagine the use case that you have the sidebar in your application. The sidebar is either open or closed. You have the side-bar component, and then you have a component (or multiple components) that can open/close it or ask for its state.

I will describe three ways of implementing this behavior

1. Passing the reference of one component to another
2. Communication through parent component
3. Communication through Service

Each one of these examples has the demo application with code inspections on StackBlitz and github repository.

1. Passing the reference of one component to another

This solution should be used when components have dependency between them. For example, dropdown and dropdown toggle. They usually can’t exist without each other.

Demo
Github repository

We will create the side-bar-toggle component which will have the side-bar component as input, and by clicking on the toggle button, we will open/close the sidebar component.

Here is the relevant code:

Imports are omitted in TypeScript code

2. Communication through parent component

Can be used when it’s easy to control shared state between components through their parent component and you don’t feel like you want to create new service or create some boilerplate code, because of one variable.

Demo
Github repository

Implementation of this approach is almost the same as the previous one. However, side-bar-toggle doesn’t receive the side-bar component. Instead parent component holds sideBarIsOpened property, which we passed to the side-bar component.

Imports are omitted in TypeScript code

3. Communication through service

Finally, this option is useful and should be used when you have component that is controlled, or its state is asked from multiple instances.

Demo
Github Repository

Now we have multiple places across the application that will need to access our side-bar component. Let’s see how we do it.

We will now create side-bar.service.ts so we will have:

• side-bar.service.ts
• side-bar.component.ts
• side-bar.component.html

Sidebar services will have toggle method and change event so every component that will inject this service can be notified that panel was opened or can toggle it.

In this example, neither the side-bar component or side-bar-toggle component has input parameters because they communicate through service.

Now the code:

Imports are omitted in TypeScript code

If you have another way of doing this or you have any problems with examples above let me know in the comments.

Don’t forget to follow me here on Medium for more JavaScript/Angular articles.

You can get in touch with me on Twitter. I will be posting the most exciting resources from JavaScript world.

We’re also always looking for passionate and talented remote software engineers. If you’d like to know more, you can contact me on my website or DM me on Twitter.

Other articles that might interest you:

Back to roots: JavaScript Value vs Reference