Recommended Free Tools
Angular NG8106 means a unit suffix such as .px, .%, or .em was added to an attr. binding. Those suffixes are supported for style bindings, not attribute bindings. Remove the suffix and include the intended unit in the bound attribute value—for example, change [attr.width.px]="5" to [attr.width]="'5px'".
What triggers NG8106?
The diagnostic is triggered by a unit suffix on an attribute binding, such as [attr.width.px]. Angular documents .px, .%, and .em as suffixes that have meaning for style bindings but not for attribute bindings. With attr.width, Angular is setting an attribute; the suffix does not convert the bound value into a unit-bearing value.
As an Amazon Associate I earn from qualifying purchases.
For example, this template produces NG8106:
<img [attr.width.px]="5" />How do you fix NG8106?
Keep the attribute binding and put the complete intended value, including its unit, in the expression. Angular’s documented correction is:
Free tools Windows power users keep installed
One-click scans. No signup required.
<img [attr.width]="'5px'" />The outer double quotes delimit the Angular expression; the inner single quotes make the expression evaluate to the string 5px. The attribute name no longer has a .px suffix.
#1 Best Overall
Should you use an attribute binding or a style binding?
Choose according to what the template is intended to set. An attr. binding targets an HTML attribute, so provide that attribute’s intended value directly. A style binding targets a style value, which is the context where Angular supports the unit suffixes discussed in NG8106.
| Intent | Binding approach | How to handle the unit |
|---|---|---|
Set an attribute, such as width |
[attr.width] |
Include the intended unit in the assigned value where applicable, as in [attr.width]="'5px'". |
| Set a style value | A style binding | Angular supports .px, .%, and .em suffixes for style bindings. |
These approaches are not interchangeable for every attribute or DOM property. Do not switch an attribute binding to a style binding merely to silence the diagnostic; use the target that matches the behavior you need.
When does Angular emit this diagnostic?
NG8106 is an Angular extended diagnostic. Extended diagnostics require strictTemplates to be enabled; NG8106 has no additional check-specific prerequisite. Angular’s extended diagnostics overview says they are warnings by default, but a project can configure them as warnings, errors, or suppressed.
How can you suppress NG8106?
Correcting the binding is preferable when the template should set an attribute or style value. If the project intentionally needs to suppress this check, use the check key suffixNotSupported in tsconfig.json:
Rank #3
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"suffixNotSupported": "suppress"
}
}
}
}The key is suffixNotSupported, not NG8106. The overview also documents defaultCategory: setting it to error promotes otherwise-default warnings to errors. Angular may add or enable extended diagnostics in minor releases, so projects that make all extended diagnostics errors should review their configuration when upgrading.
Quick Recap
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.
