Extended Diagnostics

Text attribute not binding

This diagnostic ensures that attributes which have the "special" Angular binding prefix (attr., style., and class.) are interpreted as bindings.

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

What's wrong with that?

In this example, attr.id is interpreted as 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 set the id attribute (<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.large]="true"></div>

Configuration requirements

strictTemplates must be enabled for any extended diagnostic to emit. textAttributeNotBinding has no additional requirements beyond strictTemplates.

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.