Angular: Output EventEmitter should remove "on"

[bastiW]

I am interested in helping provide a feature!

Yes

Which generators are impacted?

• [ ] All
• [X] Angular
• [ ] HTML
• [ ] Qwik
• [ ] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

What problem does this feature solve?

Angular strictly recommends not to use prefix "on" on EventEmitters.

Do name events without the prefix on. Do name event handler methods with the prefix on followed by the event name.

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.

Rule 05-16: Don't Prefix Output Properties

This is already resolved when you use a component.

The onCancel and onConfirm is changed to cancel and confirm.

Parent Component

When writing a component it is not changed. It is still prefixed with on:

Child Component Modal

--> This results in components which are usable in all other Frameworks but not in Angular, because the child output does not match to the parent.

What does the proposed API look like?

In all child components

• on should be automatically removed in all child event emits
• on should be automatically removed in parent event calls (this is already implemented)

Additional Information

No response

[bastiW]

Opened Pull request: https://github.com/BuilderIO/mitosis/pull/1565

While implementing it I stumbled across the file packages/core/src/helpers/strip-state-and-props-refs.ts. I changed the code in that file.

But there is a comment: "If you need to re-use a part of this, re-create it as an AST transform first." I don't know how to do that.