no-duplicate-attributes.md

@angular-eslint/template/no-duplicate-attributes

Ensures that there are no duplicate input properties or output event listeners

• Type: problem

• 💡 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 {
  /**
   * Whether or not two-way data binding is allowed as an exception to the rule.
   *
   * Default: `true`
   */
  allowTwoWayDataBinding?: boolean;
  /**
   * Input or output properties for which duplicate presence is allowed as an exception to the rule.
   *
   * Default: `[]`
   */
  ignore?: 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/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input [name]="foo" [name]="bar">
       ~~~~~~~~~~~~ ~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input [name]="foo" name="bar">
       ~~~~~~~~~~~~ ~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input name="foo" name="bar">
       ~~~~~~~~~~ ~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input (change)="foo($event)" (change)="bar($event)">
       ~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input [(ngModel)]="model" [(ngModel)]="otherModel">
       ~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input [name]="foo" [other]="bam" [name]="bar">
       ~~~~~~~~~~~~               ~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input [name]="foo" [name]="bar" [name]="bam">
       ~~~~~~~~~~~~ ~~~~~~~~~~~~ ~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input [(ngModel)]="model" [name]="foo" [(ngModel)]="otherModel" name="bar">
       ~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input (@fade.start)="animationStarted($event)" (@fade.start)="animationStarted($event)">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

❌ Invalid Code

<input (window:resize)="windowResized($event)" (resize)="resize()" (window:resize)="windowResized2($event)">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

Custom Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error",
      {
        "allowTwoWayDataBinding": false
      }
    ]
  }
}

❌ Invalid Code

<input [(ngModel)]="model" (ngModelChange)="modelChanged()">
       ~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

Custom Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error",
      {
        "ignore": [
          "class"
        ]
      }
    ]
  }
}

❌ Invalid Code

<input [name]="foo" class="css-static" name="bar" [class]="dynamic">
       ~~~~~~~~~~~~                    ~~~~~~~~~~

---

✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<input name="foo">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<input [name]="foo">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<input (change)="bar()">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<input [(ngModel)]="foo">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<input [(ngModel)]="model" (ngModelChange)="modelChanged()">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<div (@fade.start)="animationStarted($event)" (@fade.done)="animationDone($event)"></div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<div (window:keydown)="windowKeydown($event)" (document:keydown)="documentKeydown($event)" (document:keyup)="documentKeyup($event)" (keyup)="keyup($event)" (keydown)="keydown($event)"></div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<div [style.width.px]="col.width" [width]="col.width"></div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<button [class.disabled]="!enabled" [disabled]="!enabled"></button>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<button [@.disabled]="!enabled" [.disabled]="!enabled"></button>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/no-duplicate-attributes": [
      "error"
    ]
  }
}

✅ Valid Code

<div [style.width]="col.width + 'px'" [width]="col.width"></div>