Attribut textuel qui n'est pas un binding

Ce diagnostic vérifie que les attributs qui portent le préfixe de binding Angular « spécial » (attr., style. et class.) sont interprétés comme des bindings.

<div attr.id="my-id"></div>

Quel est le problème ?

Dans cet exemple, attr.id est interprété comme un attribut ordinaire et apparaîtra tel quel dans le HTML final (<div attr.id="my-id"></div>). Ce n'est probablement pas l'intention du développeur. L'intention est plutôt de définir l'attribut id (<div id="my-id"></div>).

Que faire à la place ?

Pour un binding vers attr., class. ou style., veillez à utiliser la syntaxe de binding de template Angular ([]).

<div [attr.id]="'my-id'"></div>
<div [style.color]="'red'"></div>
<div [class.large]="true"></div>

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. textAttributeNotBinding n'a pas d'autre prérequis que strictTemplates.

Et si je ne peux pas l'éviter ?

Ce diagnostic peut être désactivé en modifiant le fichier tsconfig.json du projet :

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "textAttributeNotBinding": "suppress"
      }
    }
  }
}

Consultez la configuration des diagnostics étendus pour en savoir plus.