A custom event service in Angular
to subscribe and broadcast messages using the observer pattern
Hi everyone, in this post, I will share my experience on how to create a custom event service in Angular using observables which is based on the principle of observer pattern and is similar to the principle of publish/subscribe design pattern.
What is the observer design pattern and how it is similar to the publish/subscribe design pattern?
In observer pattern, an object known as subject maintains a record of its dependents known as observers and informs them implicitly whenever there is a state change. Whereas in publish/subscribe design pattern, senders of the messages known as publishers do not send the messages directly to the specific receivers known as subscribers, instead communicate with each other through an agent known as broker or message broker or event bus.
Let's get started with a step by step guide on how to create a custom message event service in angular.
In this example, I have created a custom message event service and I will show you how it is being used by other angular components.
Below is the code snippet of the custom message event service file.
In this file, I have created a class called “MessageEventManager” which uses the Observable, Observer, and Subscription class of RxJS library and are the building blocks of our custom message event.
As shown in the code snippet, we have created a constructor and initialized the class members inside it and is called whenever a new object is created.
The share() operator inside the constructor is used to rebuild a new subject and subscribe it to the source observables whenever a subscription is made after the reference count drops to zero.
The subscribe(eventName: any, callback:any) method is used to register the eventName and return the subscriber and the broadcast(event:any) method is used to broadcast the next event.
The destroy(subscriber:Subscription) method is used to unsubscribe the subscriber. This method prevents memory leakage and is recommended as one of the best practices.
Next, we have created a simple app component in angular which uses MessageEventManager class to describe how message event service is used while triggering a demo event from app service.
Below is the code snippet of the app service file.
The AppService class consists of a demoEvent() method which uses the HttpClient post operator to fire the service. There is another method triggerDemoEvent() which calls the demoEvent() method and on receiving the response configures the observer by using messageEventManager class broadcast() method.
Below is the code snippet of the app component file.
In the AppComponent class, when the ngOnInit() method is initialized the AppService class triggerDemoEvent() is fired and configures the subject that is the messageEventManager class subscribe() method and notifies the observer “app.demoEvent” event and on callback shows the alert message “Demo Event”.
Note: Event name must be same in both the places that is in the broadcast() as well as subscribe() method in order for the subject to maintain the list of dependents that is nothing but the observers.
Hope this will help fellow developers who want to create a custom message event service in angular.
I am new to angular just trying to share my experiences and open to questions and constructive criticism that will help me to create more valuable resources for other developers.
References :https://angular.io/guide/observables
