$scope.$emit en Angular moderno

$emit enviaba un evento hacia arriba por todos los scopes ancestros. Un output() llega solo al padre directo, con un payload tipado.

Antes · AngularJS

// child controller
$scope.$emit('item:selected', item);

// some ancestor controller
$scope.$on('item:selected', function (event, item) {
  event.stopPropagation();
  vm.selected = item;
});

Después · Angular

// item-row.component.ts
export class ItemRowComponent {
  item = input.required<Item>();
  selected = output<Item>();
}
// its template
<button (click)="selected.emit(item())">Select</button>

// parent template
@for (item of items(); track item.id) {
  <app-item-row [item]="item" (selected)="current.set($event)" />
}

Qué cambia

Los outputs no se propagan: un abuelo que necesita el evento debe recibirlo del padre o de un servicio.
El string con el nombre del evento pasa a ser una propiedad tipada, así que el compilador encuentra a cada emisor y a cada listener.
event.stopPropagation() ya no hace falta, porque nada viaja más allá del padre.

Consejo de migración. Lista cada evento de $emit y quién lo escucha. Si el listener es el padre directo, usa un output; si está varios niveles arriba, usa un servicio declarado en los providers de ese ancestro, lo que mantiene el evento limitado a su subárbol.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn