Don’t prefix Angular Output properties with “on”

I’ve seen a lot of applications that prefix their output properties with the keyword “on”.

@Output() onCancel = new EventEmitter<boolean>();
<my-component (onCancel)="onCancel($event)"></my-component>

The Angular team actually avoids doing this for the following reasons:

Why? This is consistent with built-in events such as button clicks.

Why? Angular allows for an alternative syntax on-*. If the event itself was prefixed with on this would result in an on-onEvent binding expression.

So our output property should be:

Typescript:

@Output() cancel= new EventEmitter<boolean>();

HTML:

<my-component (cancel)="onCancel($event)"></my-component>

Cheers!