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 the angular platform for a long time. If you need to start with basic concepts in Angular I recommend for you the tour of heroes tutorial before reading this article.
Angular is based on components, so if you start to create a page in angular you should split this page into 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 with these components Or what is the best way to communicate my components?
In the next image, there are some components and examples of how you need to communicate with parents with children, siblings, child to parent, and more cases.
Ways To Communicate
- Input / Output
- Services
- ViewChild
- Event Bus Service
- State Management
Input / Output
There's an easy way for component interaction in angular. Basically, you use @input and @ouput decorator to communicate components. You can find 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 another kind of services so I'll 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
This is also called service message or observable subject. Here, you create a service and also use observables from rxjs to update data and communicate changes for all components subscribed to this service. You can find an easy tutorial here.
However, Subject has other abilities to subscribe and emit data in observables:
- Subject: they support multiple subscriptions. In other words, they are multicast
- Behavior subject: it will give you the last emitted value right away
- Replied subject: Replay Subjects keep a given number of historical values so that those values can be replayed to new subscribers
- Async subject: Subject emits only once it completes and emits 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:
Emitter Service
In angular 2, we had a lot of problems with communication. 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 these events in an object, and they will call it with a get method. Here is an 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 won't explain too much of it because you can find more in the official angular 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 decouple components. This solution uses a Mediator Pattern, so with this pattern you don’t need to know 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.
State Management
For larger Angular applications with a lot of asynchronous activity and where there's a lot of states that are being shared and manipulated across multiple components and modules. Managing the state can be quite challenging. In a typical application, we're managing things like:
- Data that comes from the server and whether it's pending or resulted in an error
- UI statelike toggles, alerts and errors messages
- User input, such as form submissions, filters and search queries
- Custom themes, credentials and localization
- 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 will have a unique store to share data between components. There are also libraries to implement this solution like NgRx, NgXS, Akita, or plain RxJS.
Above, 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 at least 3 ways to communicate to make the right decisions in your development.
Previously published at https://www.jucayovera.com/blog/article/7