$rootScope.$broadcast / $on in modern Angular

Global events on $rootScope become a shared service that holds the state. Components read it; they no longer listen for event names.

// somewhere
$rootScope.$broadcast('cart:updated', cart);

// somewhere else
$scope.$on('cart:updated', function (event, cart) {
  vm.count = cart.items.length;
});

@Injectable({ providedIn: 'root' })
export class CartStore {
  readonly cart = signal<Cart>({ items: [] });
  readonly count = computed(() => this.cart().items.length);
}

// any component
count = inject(CartStore).count;

What changes

• State has one owner and a type, instead of travelling as an untyped event payload.
• Components update automatically when the signal changes; no manual listeners to clean up.
• For true one-off events (not state), expose a Subject from the service.

Related

• controllers
• directives
• bindings (<, @, &, =)
• $q