This diagnostic detects when a numeric value is bound to a CSS length property that requires a CSS unit to have any effect.
<!-- Binding a bare number – has no visual effect -->
<div [style.width]="500"></div>
<!-- Binding a numeric string – also has no effect -->
<div [style.padding]="'20'"></div>What's wrong with that?
CSS length properties such as width, height, margin, padding, font-size, and many others require a unit (e.g. px, em, %, rem) to take effect. Binding a plain number like 500 sets the property to the string "500", which browsers treat as an invalid value and silently ignore. The element is rendered as if the style were never applied.
What should I do instead?
There are two idiomatic ways to bind a length value with a unit in Angular templates.
Use the unit-suffix shorthand
Append the desired unit directly to the binding name using the .unit suffix syntax:
<div [style.width.px]="500"></div>
<div [style.padding.rem]="1.5"></div>
<div [style.margin-top.%]="10"></div>Bind a string that already includes the unit
If you need to compose the value dynamically, bind a complete CSS value string instead:
<div [style.width]="'500px'"></div>
<div [style.padding]="myPadding + 'px'"></div>Configuration requirements
strictTemplates must be enabled for any extended
diagnostic to emit.
numericCssPropertyRequiresUnit 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": {
"numericCssPropertyRequiresUnit": "suppress"
}
}
}
}See extended diagnostic configuration for more info.