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.