What are recommanditions for @Output event names (to prevent native event name collision)?

Question

I have played with Angular 2 components and their compositions and I have run into ugly behavior, which is caused by native event bubbling and @Output name collision.

I have component app-form with form in template

<form (ngSubmit)="submitButtonClicked($event)">
  <input type="text"/>
  <button type="submit">Send</button>
</form>

I use this form component in app-middle component, which has own event emitter with name submit.

@Component({
  selector: 'app-middle',
  templateUrl: './middle.component.html',
  styleUrls: ['./middle.component.css']
})
export class MiddleComponent implements OnInit {

  @Output() submit = new EventEmitter<string>();

  constructor() { }

  emitSubmitEvent() {
    this.submit.emit("some data");
  }

}

template:

<div>

  <app-form></app-form>

</div>

And app component with template:

<app-middle (submit)="submitListener($event)"></app-middle>

Now, submitListener will be called

when submit on app-middle is called (wanted behavior)
when form is submitted, because native event bubble to the top ("parasitic" behavior)

I suppose, "parasitic" behavior is based on DOM event bubbling. I can stop it by event.stopPropagation() in submitButtonClicked handler, but if I forgot stop it, I get pretty ugly errors.

Generally, I consider this behavior quite dangerous. If I am not wrong, every event binding expression handler can be potentially called "parasitically" by native event from inner components. if has same name as any of DOM events (https://developer.mozilla.org/en-US/docs/Web/Events) And I don't talk about forward compatibility....

Same problem you can see here: https://bitbucket.org/winsik/submit-event-issue/src

Did you run into this problem? How do you name your @Outputs?

Wha tI usually do is name my custom events for @Output 's (onXxxxx). Like onSubmit, onClick, onWhatever. — KwintenP, Oct 27 '16 at 05:06
this is against angular styleguide https://angular.io/styleguide#!#05-16 — milanlempera, Oct 27 '16 at 05:10
Hmmm missed that one. Don't think I will start changing this however. Styleguide is a guideline and I find it a pragmatic solution for people who don't know all of the native events (myself included). — KwintenP, Oct 27 '16 at 06:18
Thank you, maybe I will report this as a stylequide issue because compliance with this rule is potentially dangerous. — milanlempera, Oct 27 '16 at 06:23
This angular issue might be of interest to you and future readers: https://github.com/angular/angular/issues/13997 — superjos, Jan 18 '17 at 21:54
It should be noted that angular issue now links back to this stackoverflow question. — kcazllerraf, Oct 26 '18 at 15:28
Here is the answer: https://stackoverflow.com/a/39930348/1077309 — Sampath, Jul 12 '20 at 15:48
https://angular.io/guide/styleguide#dont-prefix-output-properties — Nguyen Tran, Jan 26 '21 at 03:59

score 36 · Answer 1 · answered Jul 23 '17 at 06:11

36

I'm prefixing @Output events with the name of my components, which seems to work pretty well and to provide a consistent and clear convention which avoids the problems you describe. For example, suppose I have a component named, e.g. TurnEditorComponent -- @Output events might be named turnEditorChange, turnEditorFocus, turnEditorBlur and so on.

answered Jul 23 '17 at 06:11

simon

15,344
5
45
67

2

I've been looking for a solution to this naming issue and I really like this one – mbrookson Nov 10 '17 at 12:36
4

**Simply prefix all events with "`by`", like "`byClick`"** (meaning an event resulted `by Click`ing something, which is Human-readable, like: `(byClick)="doSomething()"`). Furthermore (you may already use this one), **prefix all listeners with "`on`", like "`onClick`"**, Quite self explaining: `onClick() { doSomething(); }` or `(byClick)="onClick()"` (BTW, lint may forbid `on` as `@Output` prefix) – Top-Master Nov 09 '21 at 16:07
4

prefixing by "by" sounds cool. Prefixing by **"on" is discouraged by Angular:** https://angular.io/guide/styleguide#style-05-16 ("don't prefix output properties") – devaga Jan 20 '22 at 06:47
2

@devaga, he said prefix **listeners** (aka - the event handlers that consume the output events) with `on`, which is recommended in the style guide. – Jaime Still Jul 29 '22 at 19:04
I prefer `outClick` for the emitter and `onClick` for the handler. – Irfanullah Jan Jun 13 '23 at 13:16

What are recommanditions for @Output event names (to prevent native event name collision)?

1 Answers1