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.