no-output-on-prefix.md

@angular-eslint/no-output-on-prefix

Ensures that output bindings, including aliases, are not named "on", nor prefixed with it. See more at https://angular.io/guide/styleguide#style-05-16

• Type: suggestion

Rule Options

The rule does not have any configuration options.

Usage Examples

The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.

❌ - Toggle examples of incorrect code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component({
  outputs: ['on']
            ~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive({
  inputs: [onCredit],
  'outputs': [onLevel, `test: on`, onFunction()],
                       ~~~~~~~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component({
  ['outputs']: ['onTest: test', ...onArray],
                ~~~~~~~~~~~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive({
  [`outputs`]: ['onTest: test', ...onArray],
                ~~~~~~~~~~~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component()
class Test {
  @Output() on: EventEmitter<any> = new EventEmitter<{}>();
            ~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive()
class Test {
  @Output() @Custom('on') 'onPrefix' = new EventEmitter<void>();
                          ~~~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component()
class Test {
  @Custom() @Output(`on`) _on = getOutput();
                    ~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive()
class Test {
  @Output('onPrefix') _on = (this.subject$ as Subject<{on: boolean}>).pipe();
          ~~~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component()
class Test {
  @Output('getter') get 'on-getter'() {}
                        ~~~~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

❌ Invalid Code

@Injectable()
class Test {
  @Output('on') onPrefix = this.getOutput();
          ~~~~  ~~~~~~~~
}

---

✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Page({
  outputs: ['on', onChange, `onLine`, 'on: on2', 'offline: on', ...onCheck, onOutput()],
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Component()
class Test {
  on = new EventEmitter();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive()
class Test {
  @Output() buttonChange = new EventEmitter<'on'>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Component()
class Test {
  @Output() On = new EventEmitter<{ on: onType }>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive()
class Test {
  @Output(`one`) ontype = new EventEmitter<{ bar: string, on: boolean }>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Component()
class Test {
  @Output('oneProp') common = new EventEmitter<ComplextOn>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive()
class Test<On> {
  @Output() ON = new EventEmitter<On>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

const on = 'on';
@Component()
class Test {
  @Output(on) touchMove: EventEmitter<{ action: 'on' | 'off' }> = new EventEmitter<{ action: 'on' | 'off' }>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

const test = 'on';
const on = 'on';
@Directive()
class Test {
  @Output(test) [on]: EventEmitter<OnTest>;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-output-on-prefix": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  selector: 'foo',
})
class Test {
  @Output() get 'getter'() {}
}