Angular - 5.7-Attribution d'un alias aux événements personnalisés

Dans la leçon précédente, nous avons découvert @Output et EventEmitter pour permettre à nos composants d'émettre des événements personnalisés. Tout comme @Input, @Output accepte un alias pour exposer à l'extérieur un nom d'événement différent du nom interne. Pratique pour publier une API de composant claire et stable sans toucher au code interne.

Renommer un événement émis

Reprenons notre événement blueprintCreated. On préférerait l'exposer sous un nom plus court depuis l'extérieur : bpCreated. Comme pour @Input, on passe le nom externe en argument au décorateur :

@Output('bpCreated') blueprintCreated = new EventEmitter<{ bpName: string; bpContent: string }>();
  • côté parent, on n'écoute plus (blueprintCreated) mais (bpCreated)="onBlueprintAdded($event)" ;
  • côté enfant, le code TypeScript continue d'utiliser this.blueprintCreated.emit(...) sans changement ;
  • l'ancien nom blueprintCreated n'est plus exposé à l'extérieur — seul bpCreated peut être écouté.

Tout le reste reste en place et fonctionne exactement comme avant : l'alias ne fait que renommer le canal d'écoute publique. C'est le même mécanisme que pour @Input, simplement appliqué à un événement sortant.