Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular reports NG8104 when a template uses attr., style., or class. without square brackets, so Angular treats the text as a plain attribute rather than a binding. To bind a value, put brackets around the full name—for example, change attr.id="my-id" to [attr.id]="myId".
What NG8104 means
Angular’s NG8104 diagnostic checks for text attributes beginning with the special prefixes attr., style., or class. that look like they may have been intended as bindings. Without square brackets, Angular interprets the name as a regular HTML attribute. For example, <div attr.id="my-id"></div> can leave an attribute literally named attr.id instead of setting the element’s id.
How to fix NG8104
Use square brackets around the complete binding name. The expression in quotes supplies the value Angular should bind:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems<div [attr.id]="myId"></div>binds an attribute value.<div [style.color]="textColor"></div>binds a style value.<div [class.large]="isLarge"></div>binds whether the class is applied.
These are syntax examples; use an expression that matches the property or state in your component. If the value is meant to be static text rather than a dynamic binding, remove the special prefix and use the ordinary attribute or class/style syntax appropriate to the template.
#1 Best Overall
Why the diagnostic appears—and when it runs
Extended diagnostics require strictTemplates to be enabled. Angular documents no additional requirement for the textAttributeNotBinding check. If you see NG8104, inspect the flagged template name first: brackets are usually the intended correction when the prefix indicates a binding.
Suppressing the check
If you need to stop Angular from emitting this particular diagnostic, add the following to the project’s tsconfig.json:
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"textAttributeNotBinding": "suppress"
}
}
}
}Suppression only disables the warning. It does not turn an unbracketed attr., style., or class. text attribute into a binding, so correct the template syntax when a binding is what you intended.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
