Event publish - subscribe mechanism as Angular service using Observable. You can publish your event along with any data to all the subscribers of your event (event identification is being done using event-name as string).
Install the module.
npm i @pscoped/ngx-pub-sub --save
I had to scope (
@pscoped
) my package with something, because another package having similar name was already published for AngularJS (v 1.x)
Import NgxPubSub
module into your module
import { NgxPubSubModule } from '@pscoped/ngx-pub-sub';
@NgModule({
....
imports: [
.....
NgxPubSubModule
],
....
})
export class AppModule {}
Use NgxPubSubService
and subscribe to your event.
export class SubscriberComponent implements OnDestroy {
subscription: Subscription;
myNumber: number;
constructor(private pubSub: NgxPubSubService) { }
ngOnInit() {
this.subscription = this.pubSub.getEventObservable('randomNumber')
.subscribe(data => this.myNumber = data);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
And publish the event.
export class PublisherComponent {
eventName = 'randomNumber';
random: number;
constructor(private pubsub: NgxPubSubService) { }
publish() {
this.random = Math.floor(Math.random() * 100);
this.pubsub.publishEvent(this.eventName, this.random);
}
}
The repository also comes with the test application. Check the Github repo link.
After having the source code, run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Below is how the demo application looks like.
- Run
npm run test:lib
to execute thengx-pub-sub
library test cases. - Run
npm run coverage:lib
to generate the code-coverage report.
This project was generated with Angular CLI using Nrwl Nx.
MIT @ paritosh64ce