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.
- Install library in your Angular project using command:
npm install --save ng-event-broker
- Define your application level events in separate file
events.model.ts. For example,
- Register application wide events in
AppComponent. Before publishing or subscribing to any events, they must be registered. As AppComponent is root component, we should define our application wide events here.
- Once events are registered, we can publish and subscribe them in rest of application. For example, in below code HeaderComponent subscribe to event
cartCountUpdated. Whenever this event is published,
onCartUpdated()method will be called. Similarly on
Logoutbutton click, HeaderComponent will publish
logoutevent for subscribers to handle it.
To publish event, simply call
paylaod can be value of type
any. Make sure, event is registered first using `registerEvent()` before publishing.
To subscribe event, simply call `subscribeEvent()` function which returns `EventEmitter<any>`. You can call `subscribe()` on this event emitter and handle event.
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.
In Angular application, we often require to pass data and messages between components and classes. If parent/child…
You can play around with Demo application here.