Angular - 5.7-Assigning an alias to custom events

Just like @Input() properties can be exposed under a friendlier name, custom events emitted via @Output() also accept an alias. Aliasing an output is useful when the internal name of the EventEmitter is technical or when you want to keep the parent template stable as the child refactors its internals.

The syntax mirrors what we did for inputs: you pass a string to the @Output() decorator and that string becomes the event name used in the parent template. The property on the class can keep any internal name you want — only the alias is part of the public contract.

// child component
@Output('serverWasCreated') serverCreated = new EventEmitter<ServerData>();

onCreate() {
  this.serverCreated.emit(data);
}

// parent template
<app-cockpit (serverWasCreated)="onAdded($event)"></app-cockpit>

From the parent's perspective the event is now serverWasCreated, but inside the child class the developer still calls this.serverCreated.emit(...). This decoupling is a small habit with big benefits: API names can evolve independently from internal property names, and the public surface of the component is explicit rather than incidental. Together with the input alias, this gives you full control over how the component is consumed from the outside.