Inter-component communication in Angular
Ideally in a real world Angular app you would want one component to interact with other components in your app.
A simple example would be an e-commerce app where the products are displayed in a product component and the number of products added to your shopping cart is in a product cart component and you want to update the shopping cart count value whenever a product is added.
There are three simple ways you could do this :
- Parent-Child component communication
- Observable as a service
- Event Bus
There are other complicated ways as well to achieve this :
- using @ViewChild & @ContentChild decorators where you grab the instance reference of your component and manipulate it programmatically.
- using Template Outlets which is used to communicate between dynamic components in Angular.
Parent to Child communication
Use @Input decorator in your child component so data can be pushed from the parent component.
Make use of the child data store in your child component template.
Pass the data from your parent to your child component using simple property binding in your parent component template.
Below is your parent component which pushes values into your child data store.
Use @Ouput decorator in your child component and instantiate an EventEmitter object whenever you want to transfer data to the parent component, use the emit function on this EventEmitter object.
In your parent component template you have a callback which is defined in your parent component, this callback listens to events emitted from the child component.
Use the callback in your parent component to fetch the data from the child component.
Ta-da! As you can see from the output below you are able to move your data between your parent and child components.
Observable as a Service
Use the ever reliable RxJs subjects to communicate between components which do not have a parent to child component relationship in Angular.
I have used two services ComponentAService and ComponentBService to exchange data between ComponentA and ComponentB.
UpdateData is the function which is used to push values into the internal Rxjs subject in both the services.
In ComponentA inject services at the component level, you push values to ComponentB and subscribe to changes if there are any pushed from ComponentB in your constructor (or any other lifecycle hooks).
In ComponentB inject services at the component level, you push values to ComponentA and subscribe to changes if there are any pushed from ComponentA in your constructor (or any other lifecycle hooks).
Bravo! You can now see from the output below data can be moved between ComponentA and ComponentB.
Event Bus
Again, you would use the ever reliable RxJs subjects to communicate between components which do not have a parent to child component relationship in Angular.
I have used a single event bus service with n number of RxJs subjects which act as data stores for both ComponentA and ComponentB, this event bus service is registered at the root level of your app (app module).
In ComponentA you emit values to ComponentB and listen on changes if there are any pushed from ComponentB in your constructor (or any other lifecycle hooks).
In ComponentB you emit values to ComponentA and listen on changes if there are any pushed from ComponentA in your constructor (or any other lifecycle hooks).
You can see from the output below data can be moved between ComponentA and ComponentB similar to observable as a service.
The real difference between using Observable as a Service and Event Bus is on your app architecture, ideally I would prefer using Event Bus throughout my app at the root level scope (providers array in app module) and using Observable as a Service at the component level scope (providers array in individual component).
Also a good rule of thumb is unsubscribing from your subscriptions on destruction of your components, converting your subjects to observables and subscribing to them to avoid event soups by subscribing to your internal RxJs subjects directly.
Until next time, adios.
