What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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 NG8106 means a unit suffix such as .px, .%, or .em was added to an attribute binding. Remove the suffix and put the complete value, including its unit, in the expression—for example, change [attr.width.px]="5" to [attr.width]="'5px'".
What triggers NG8106?
Angular reports NG8106 when a binding uses an attribute target with one of these suffixes: .px, .%, or .em. For example:
<img [attr.width.px]="5" />The suffix syntax applies to style bindings, not attribute bindings. Since the target here is attr.width, Angular does not use .px to convert or append a unit to the attribute value. See Angular’s NG8106 documentation.
How do you fix NG8106?
Keep the attribute binding and provide the intended attribute value directly, including its unit:
#1 Best Overall
<img [attr.width]="'5px'" />In this example, the expression evaluates to the string 5px, which is assigned as the attribute value. Apply the same principle when using .% or .em: remove the suffix from the attribute binding and include the intended unit in the value itself.
Should you use an attribute binding or a style binding?
Choose according to what the template is meant to set. An attribute binding targets an HTML attribute and should receive its complete intended value. A style binding targets a CSS style; Angular supports these unit suffixes in that context. The forms are not interchangeable for every attribute or DOM property, so changing to a style binding is appropriate only when you intend to set a style rather than an attribute.
When does Angular emit NG8106?
Angular extended diagnostics require strictTemplates to be enabled. NG8106 has no additional check-specific prerequisite. Extended diagnostics are warnings by default, but Angular lets projects configure them as warnings, errors, or suppressed. See the extended diagnostics overview.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →How can you suppress NG8106?
If you deliberately need to suppress this check, configure the check key suffixNotSupported under angularCompilerOptions.extendedDiagnostics.checks in tsconfig.json:
Rank #3
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"suffixNotSupported": "suppress"
}
}
}
}Use suffixNotSupported, not NG8106, as the configuration key. Fixing the binding is generally the direct solution; suppression only changes whether Angular reports the diagnostic.
What if NG8106 becomes a build error after an upgrade?
Check the extended-diagnostics configuration in your project. A configured defaultCategory of error promotes diagnostics that would otherwise be warnings. Angular also notes that extended diagnostics can be added or enabled in minor releases, so projects that promote all such diagnostics to 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.
