This rule raises an issue when Angular output bindings (using @Output() decorator or output() function) are named exactly "on" or start with "on".

Why is this an issue?

Angular follows specific naming conventions for component outputs to maintain consistency and avoid confusion.

Outputs named "on" or prefixed with "on" (like onClick, onSubmit) conflict with Angular’s recommended patterns. These names suggest when something happens rather than what happened, which goes against Angular’s event naming philosophy.

Using "on" prefixes can also create confusion with native DOM event handlers, making code harder to understand and maintain. Angular’s style guide recommends descriptive event names that clearly indicate the action or state change that occurred.

What is the potential impact?

Using improper output naming can lead to confusion between component events and DOM events, making code less readable and harder to maintain. It also violates Angular’s established conventions, potentially causing issues in team environments where consistent coding standards are important.

How to fix in Angular?

Rename outputs to use descriptive names without the "on" prefix. Focus on what happened rather than when it happened.

Non-compliant code example

@Component()
class MyComponent {
  @Output() onClick = new EventEmitter(); // Noncompliant
  @Output() onSubmit = new EventEmitter(); // Noncompliant
}

Compliant code example

@Component()
class MyComponent {
  @Output() click = new EventEmitter();
  @Output() submit = new EventEmitter();
}

For the newer output() function, avoid "on" prefixes in both property names and aliases.

Non-compliant code example

@Component()
class MyComponent {
  onClick = output(); // Noncompliant
  change = output({ alias: 'onChange' }); // Noncompliant
}

Compliant code example

@Component()
class MyComponent {
  click = output();
  change = output({ alias: 'change' });
}

In component metadata, ensure output declarations don’t use "on" prefixes.

Non-compliant code example

@Component({
  outputs: ['onClick', 'onSubmit'] // Noncompliant
})
class MyComponent {}

Compliant code example

@Component({
  outputs: ['click', 'submit']
})
class MyComponent {}

Documentation