Angular Component Communication

Today, we are going to talk about Angular Component Communication, the last version of Angular is @9, but I will show definitions to communicate in all angular versions, probably it will be in angular platform for a long time. If you need to start with basic concepts in Angular I recommend for you the tour of heros before reading this article. Here

Angular is based on components, so if you start to create a page in angular you should split this page in small components, each component is a container for a small logic, html and css when you have a lot of components you have a big problem called “Communication” How can I communicate this components? Or what is the best way to communicate my components? In the next image here I’m showing some components and how you need to communicate parents with child, siblings, child to parent and more cases .

Ways To Communicate

1. Input / Output
2. Services
3. ViewChild
4. Event Bus Service
5. State Management

Input / Output

It’s an easy way for component interaction in angular, basically you use @input and @ouput decorator to communicate components, you can found a good and easy documentation Here

@Input() hero: Hero;
@Output() voted = new EventEmitter<boolean>();

Services

A parent component and its children share a service whose interface enables bi-directional communication within the family that definition is from angular documentation, in summary you can create a service and you should inject this service in each component to share information. Of course Angular doesn’t talk about other kind of services so I tell you some basic services implementation:

Singleton

It’s simple you create a service and you can create variables, properties and methods in your service to share data. You should use it only if you need to share easy data loaded just one time.

Service Subject

Also called service message or observable subject, because you create a service also use observables from rxjs to update data and communicate changes for all components subscribed to this service. You can found an easy tutorial Here

However, Subject has other abilities to subscribe and emit data in observables, I left this concepts here :

1. Subject: they support multiple subscriptions. In other words, they are multicast.
2. Behaviour subject: it will give you the last emitted value right away.
3. Replied subject: Replay Subjects keep a given number of historical values so that those values can be replayed to new subscribers.
4. Async subject: Subject emit only once it completes and emit only the latest value it received.

If you are interested in more about it, you can read this Article also you can see an example in codesanbox:

https://codesandbox.io/s/inspiring-silence-6zcsr?fontsize=14&hidenavigation=1&theme=dark

Emitter Service

In angular 2, we had a lot of problems with communication, so another valid way if you don’t have too much communication and you need to do it in a simple way, probably you could create a service with EventEmmiters and register this events in an object, and they will call it with a get method. Here a old Post with the solution or you can see my Example

ViewChild

You can attach your child component with parent component with a decorator called @ViewChild, I don’t explain too much it because you can found in angular a good documentation Docs

Event Bus Service

You can create a service with an event bus, it is passing data between different components and it’s going to be a type of mediator or middleman, you should use it if you need to deacoplate components, this solution use a Mediator Pattern so with this pattern you don’t need knows other components or what component is reading your data. It’s perfect when you use unit testing.

As you can see in the image, the mediator pattern is like an airport, airplanes don’t communicate between them, they use a central tower to keep communication and separate responsibilities.

Here a Post to explain this implementation and also I created a service to show it Example with examples.

State Management

For larger Angular applications with a lot of asynchronous activity and where there’s a lot of state that is being shared and manipulated across multiple components and modules, managing state can be quite challenging. In a typical application, we’re managing things like:

1. Data that comes from the server and whether it’s pending or resulted in an error
2. UI state like toggles, alerts and errors messages
3. User input, such as form submissions, filters and search queries
4. Custom themes, credentials and localization
5. Many other types of state

In summary, these problems come from SPA pages, and the solution is to create a single state to centralize and manage states for our application. You have a unique store to share data between components.

You have libraries to implement this solution like NgRx, NgXS, Akita or plain RxJS.

A good explanation Here

Finally, I tried to explain the most common ways to communicate components. I think it’s an important decision when you are building your application, so each angular developer should know 3 ways to communicate at least to make right decisions in your development.