Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
ng-event-broker
Advanced tools
EventBrokerService provide application level communication via events.
In Angular application, we often require to pass data and messages between components and classes. If parent/child component hierarchy is present then we can pass data using @Input() and @Output() decorators. If not then we can create custom event service and pass events/data.
This library exports EventBrokerService
which is available through application level and can be injected in any declarable classes. Using EventBrokerService
application events can flow in streamline fashion without mixing component's logic with event handling and publishing code.
Install library in your Angular project using command npm install --save ng-event-broker
Import EventBrokerModule
from ng-event-broker
library
import { EventBrokerModule } from 'ng-event-broker';
@NgModule({
declarations: [
],
imports: [
EventBrokerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
events.model.ts
. For example,export const Events = {
loginFailed: 'loginFailed',
loginSuccessful: 'loginSuccessful',
logout:'logout',
productAdded:'productAdded',
productRemoved:'productRemoved',
cartCountUpdated: 'cartCountUpdated'
}
ngOnInit()
of 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.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private eventService: EventBrokerService) {
}
ngOnInit() {
this.registerAppEvents();
}
private registerAppEvents() {
this.eventService.registerEvent(Events.loginSuccessful);
this.eventService.registerEvent(Events.logout);
this.eventService.registerEvent(Events.productAdded);
this.eventService.registerEvent(Events.productRemoved);
this.eventService.registerEvent(Events.cartCountUpdated);
}
cartCountUpdated
. Whenever this event is published, onCartUpdated()
method will be called. Similarly on Logout
button click, HeaderComponent will publish logout
event for subscribers to handle it.<li><a href="javascript:void(0);" (click)="logout()">Logout</a></li>
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
cartItemCount = 0;
constructor(private eventService: EventBrokerService) { }
ngOnInit() {
this.eventService.subscribeEvent(Events.cartCountUpdated).subscribe((cartCount: number) => this.onCartUpdated(cartCount))
}
onCartUpdated(cartCount: number) {
this.cartItemCount = cartCount;
}
logout() {
this.eventService.publishEvent(Events.logout);
}
}
To publish event, simply call publishEvent(payload)
where paylaod
can be value of type any
.
this.eventService.publishEvent(Events.logout);
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.
this.eventService.subscribeEvent(Events.cartCountUpdated).subscribe((cartCount: number) => this.onCartUpdated(cartCount))
}
We can clear all events using clearEvents()
function.
You can find complete source code of very basic eShop demo application and see how events are passed and handled throughout application.
https://github.com/ultrasonicsoft/ng-event-broker-service-example
You can play around with Demo here.
Feel free to contribute to this project by raising PR in GitHub repository.
FAQs
EventBrokerService provide application level communication via events.
We found that ng-event-broker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.