What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Angular NG0318 means a style binding evaluated to a value type Angular does not support. Find the binding named in the warning and provide a CSS string or number, a style-context SafeValue, or null/undefined if the style should be removed.
What NG0318 means
Angular describes the error as: “Angular detected a value with an unsupported type in a style property binding.” It concerns the value supplied at runtime, not necessarily a misspelled CSS property. The warning can arise from an individual binding such as [style.width] or from a property inside a [style] map. See Angular’s NG0318 documentation.
Style bindings accept strings, numbers, SafeValue objects created for the style security context, null, and undefined. Other types trigger the warning in development mode.
How to fix NG0318
- Locate the reported binding. Use the property and value named in the warning to find the corresponding
[style.property]binding or entry in a[style]map. - Return a supported style value. Make the expression evaluate to a CSS string or number, or to a
SafeValuecreated for the style security context. - Remove the style when that is the intent. Return
nullorundefinedinstead of an unsupported value. - Match unit-suffixed bindings to their expected value. For
[style.width.px], bind the numeric portion:<div [style.width.px]="width"></div>. - Check the security context. A
SafeValuetrusted for a different context, such as HTML, is not appropriate for a style binding.
Example: a boolean bound to a style
This binding passes application state as the style value:
#1 Best Overall
<div [style.display]="isVisible"></div>
isVisible is a boolean, not a CSS display value. Map the state to an appropriate CSS string if the element should receive a display style, or return null/undefined if the style should be removed. Which CSS value is right depends on the intended layout and behavior.
Quick Recap
Rank #3
Where to look if the warning persists
- Check every branch of a conditional expression; one branch may return a boolean, object, or other unsupported type.
- If the binding uses a style map, inspect the value for the specific property named in the warning rather than assuming the whole map is invalid.
- For values involving Angular trust APIs, verify that the trusted value was created for the style security context.
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.
