Stop Using a Global Event Bus to Make Angular Features Talk to Each Other

An application-wide Subject feels loosely coupled — until nobody knows who emits an event, who reacts to it, or what else will break when it changes.

Cross-feature communication eventually appears in almost every enterprise Angular application.

An Order is approved.

The dashboard needs to refresh.

Notifications need to update.

A summary widget needs to recalculate.

So somebody creates:

@Injectable({
  providedIn: 'root'
})
export class EventBus {
  private readonly eventsSubject =
    new Subject<AppEvent>();

readonly events$ =
    this.eventsSubject.asObservable();
  emit(event: AppEvent) {
    this.eventsSubject.next(event);
  }
}

Then Orders emits:

this.eventBus.emit({
  type: 'ORDER_APPROVED',
  orderId
});

Not a Member? Read for FREE here.

The dashboard listens:

this.eventBus.events$
  .pipe(
    filter(
      event =>
        event.type ===
        'ORDER_APPROVED'
    )
  )
  .subscribe(() =>
    this.dashboardStore.refresh()
  );