@juan-carlosJuan Carlos Yovera Cruz
Senior Front End, UX/UI specialist with more than 14 years’ experience in development of software
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 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 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 here I’m showing some components and how you need to communicate with parents with children, siblings, child to parent, and more cases.
Ways To Communicate
- Input / Output
- Event Bus Service
- 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 good and easy documentation Here
@Input() hero: Hero; @Output() voted = new EventEmitter<boolean>();
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 tell you some basic services implementation:
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.
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 these concepts here :
- Subject: they support multiple subscriptions. In other words, they are multicast.
- Behaviour 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.
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 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
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 found more in the angular 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 decouple components, this solution uses 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.
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 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 the right decisions in your development.
Previously published at https://www.jucayovera.com/blog/article/7