no-input-rename.md

@angular-eslint/no-input-rename

Ensures that input bindings are not aliased

• Type: suggestion

• 🔧 Supports autofix (--fix)

• 💡 Provides suggestions on how to fix issues (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions)

Rule Options

The rule accepts an options object with the following properties:

interface Options {
  /**
   * A list with allowed input names
   *
   * Default: `[]`
   */
  allowedNames?: string[];
}

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-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component({
  inputs: ['a: b']
           ~~~~~~
})
class Test {}

---

Custom Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error",
      {
        "allowedNames": [
          "check",
          "test"
        ]
      }
    ]
  }
}

❌ Invalid Code

@Directive({
  outputs: ['abort'],
  'inputs': [boundary, `test: copy`, 'check: check'],
                       ~~~~~~~~~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component({
  ['inputs']: ['orientation: orientation'],
               ~~~~~~~~~~~~~~~~~~~~~~~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive({
  [`inputs`]: ['orientation: orientation'],
               ~~~~~~~~~~~~~~~~~~~~~~~~~~
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component()
class Test {
  @Custom() @Input(`change`) _change = getInput();
                   ~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive()
class Test {
  @Input('change') change = (this.subject$ as Subject<{blur: boolean}>).pipe();
         ~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive({
  selector: 'foo'
})
class Test {
  @Input('aria-invalid') ariaBusy: string;
         ~~~~~~~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component({
  selector: 'foo'
})
class Test {
  @Input('fooColor') colors: string;
         ~~~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive({
  'selector': 'foo'
})
class Test {
  @Input('foocolor') color: string;
         ~~~~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Component({
  selector: 'click',
})
class Test {}

@Injectable()
class Test {
  @Input('click') blur = this.getInput();
         ~~~~~~~
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

❌ Invalid Code

@Directive({
  selector: 'img[fooDirective]',
})
class Test {
  @Input('notFooDirective') foo: Foo;
         ~~~~~~~~~~~~~~~~~
}

---

✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Page({
  inputs: ['play', popstate, `online`, 'obsolete: obsol', 'store: storage'],
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

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

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

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

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  inputs,
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  inputs: [...test],
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  inputs: func(),
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  inputs: [func(), 'a'],
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  selector: 'qx-menuitem',
  hostDirectives: [{
    directive: CdkMenuItem,
    inputs: ['cdkMenuItemDisabled: disabled'],
  }]
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  selector: 'qx-menuitem',
  'hostDirectives': [{
    directive: CdkMenuItem,
    inputs: ['cdkMenuItemDisabled: disabled'],
  }]
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  selector: 'qx-menuitem',
  ['hostDirectives']: [{
    directive: CdkMenuItem,
    inputs: ['cdkMenuItemDisabled: disabled'],
  }]
})
class Test {}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({})
class Test {
  @Input() set setter(setter: string) {}
}

---

Custom Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error",
      {
        "allowedNames": [
          "aria-wrong"
        ]
      }
    ]
  }
}

✅ Valid Code

@Component({
  inputs: ['foo: aria-wrong']
})
class Test {
  @Input('aria-wrong') set setter(setter: string) {}
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

const change = 'change';
@Component()
class Test {
  @Input(change) touchMove: EventEmitter<{ action: 'click' | 'close' }> = new EventEmitter<{ action: 'click' | 'close' }>();
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

const blur = 'blur';
const click = 'click';
@Directive()
class Test {
  @Input(blur) [click]: EventEmitter<Blur>;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  selector: 'foo[bar]'
})
class Test {
  @Input() bar: string;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Component({
  selector: '[foo], test',
})
class Test {
  @Input('foo') label: string;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  selector: 'foo'
})
class Test {
  @Input('aria-label') ariaLabel: string;
}

---

Custom Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error",
      {
        "allowedNames": [
          "allowedName"
        ]
      }
    ]
  }
}

✅ Valid Code

@Component({
  inputs: ['foo: allowedName']
})
class Test {
  @Input() bar: string;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  selector: 'foo'
})
class Test {
  @Input('fooMyColor') myColor: string;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  selector: 'img[fooDirective]'
})
class Test {
  @Input foo: Foo;
}

---

Default Config

{
  "rules": {
    "@angular-eslint/no-input-rename": [
      "error"
    ]
  }
}

✅ Valid Code

@Directive({
  selector: 'img[fooDirective]'
})
class Test {
  @Input('fooDirective') foo: Foo;
}