Postboy Help

Subscribing in Multiple Components

When a single domain event affects several parts of the UI, each component subscribes to the same PostboyGenericMessage independently.
None of them know about each other, and the publisher remains completely unchanged.

1. The event: CallStartedEvent

This event is published when a new call arrives. It carries all the information needed by the UI.

import {PostboyGenericMessage} from '@artstesh/postboy'; import {Call} from '../models/call.model'; export class CallStartedEvent extends PostboyGenericMessage { static readonly ID = 'call.started'; constructor(public readonly call: Call) { super(); } }

The message is already registered somewhere central (for example, in CallRoutingService), so components only need to subscribe.

2. Header component: show an alert badge

The header displays a badge when a call is active.

import {AppPostboyService} from '@shared/services/app-postboy.service'; import {CallStartedEvent} from './messages/events/call-started.event'; export class OperatorHeaderComponent { hasActiveCall = false; constructor(private postboy: AppPostboyService) { this.postboy.sub(CallStartedEvent).subscribe((msg) => { this.hasActiveCall = true; }); } }

3. Customer profile widget: show caller details

The customer profile widget uses the same event to display the caller’s name and VIP status.

export class CustomerProfileWidgetComponent { customerName = ''; isVip = false; constructor(private postboy: AppPostboyService) { this.postboy.sub(CallStartedEvent).subscribe((msg) => { this.customerName = msg.call.customer.name; this.isVip = msg.call.customer.isVip; }); } }

4. Call status panel: start call timer

A separate panel starts a timer as soon as the call arrives.

export class CallStatusPanelComponent { callDuration = 0; constructor(private postboy: AppPostboyService) { this.postboy.sub(CallStartedEvent).subscribe((msg) => { this.startTimer(); }); } private startTimer(): void { // timer logic... } }

5. Toast center: show a notification

Even the global toast notification service listens to the same event.

export class ToastCenterService { constructor(private postboy: AppPostboyService) { this.postboy.sub(CallStartedEvent).subscribe((msg) => { this.showToast(`Incoming call from ${msg.call.customer.name}`); }); } private showToast(text: string): void { // ... } }

Key points

  • A single fire(new CallStartedEvent(call)) updates four different UI areas automatically.

  • Each component subscribes in its own constructor and reacts with its own logic — no cross‑component wiring is needed.

  • Adding a fifth subscriber (e.g., a logging panel) requires only a new subscription; nothing else changes.

  • This pattern eliminates @Input chains and shared state services that would otherwise tangle the components together.

03 мая 2026
Broadcasting Events from ServicesFire‑and‑Forget Semantics