Interaction between components — Angular Event Broker Service

Angular application should be built by assembling small and atomic level components which follows SOLID principles. One of the challenge occurs when components needs to pass data and message between each other. If components are in Parent-Child hierarchy then it is very easy to implement using @Input() and @Output() decorators. But when components are not related with each other, then it becomes bit tricky. One of the solution is creating a Dependency Injectable service class which will aggregate events and pass between components. Since it is repetitive process, I have published a npmjs package — ng-event-broker which expose EventBrokerService. In this story we will see how to use it.

Installation

  • Install library in your Angular project using command:

Usage

  • Import EventBrokerModule from ng-event-broker library
app.module.ts
event.model.ts
app.component.ts
header.component.ts

API Reference

Publish event

To publish event, simply call publishEvent(payload) where paylaod can be value of type any. Make sure, event is registered first using `registerEvent()` before publishing.

Subscribe event

To subscribe event, simply call `subscribeEvent()` function which returns `EventEmitter<any>`. You can call `subscribe()` on this event emitter and handle event.

Clear events

We can clear all events using `clearEvents()` function.

Source code and Example

You can find complete source code of very basic eShop demo application and see how events are passed and handled throughout the application.

Demo

You can play around with Demo application here.

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan