Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NG8104: Text attribute not binding

Description

This diagnostic ensures that attributes which have the "special" Angular binding prefix (attr., style., and class.) are interpreted as bindings. For example, <div attr.id="my-id"></div> will not interpret this as an attribute binding to id but rather just a regular attribute and will appear as-is in the final HTML (<div attr.id="my-id"></div>). This is likely not the intent of the developer. Instead, the intent is likely to have the id be set to 'my-id' (<div id="my-id"></div>).

What should I do instead?

When binding to attr., class., or style., ensure you use the Angular template binding syntax.

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

What if I can't avoid this?

This diagnostic can be disabled by editing the project's tsconfig.json file:

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

See extended diagnostic configuration for more info.