Angular’s NG8002: Invalid Attribute means the compiler cannot resolve a property or attribute binding on an element. Check the binding’s spelling and syntax, then confirm its target is either a native DOM property or an input of an Angular component or directive applied to that element. If you meant to set an HTML attribute that has no corresponding DOM property, use Angular’s attr. binding form.
What NG8002 means
Angular reports NG8002 when an attribute or property cannot be resolved during template compilation. A square-bracket binding such as [disabled] sets a property; Angular must be able to match that property to the native element or to an input on a component or directive applied there. The exact fix depends on the failing template and the declarations or imports that make its components and directives available. See Angular’s NG8002 documentation.
As an Amazon Associate I earn from qualifying purchases.
How to diagnose and fix the binding
- Read the full error. Note the element named in the compiler message and the unresolved binding name.
- Check spelling and binding syntax. Compare the binding name with the intended DOM property or Angular input. Square brackets bind a dynamic value to a property; they do not make an arbitrary attribute name valid.
- For a native HTML element, check whether the target is a DOM property. If it is, use the property binding. If you need an HTML attribute that has no corresponding DOM property—for example, some SVG attributes—use the
attr.prefix, as in[attr.role]="roleValue". Angular documents that a null value for an attribute binding removes the attribute. See Angular’s binding guide. - For a component or directive, verify its input. Confirm that the intended component or directive is applied to the element and exposes an input with the name used in the template. Then check that the component or directive is available through the declarations or imports required by your project setup.
- Check whether the problem is actually the element. If Angular cannot resolve the element or its selector, investigate NG8001 rather than treating the error as a binding problem.
Choose the binding form that matches the target
| What you are setting | Binding form | What to verify |
|---|---|---|
| A native DOM property | [propertyName]="value" |
The property exists on that element, and the name is spelled correctly. |
| An Angular component or directive input | [inputName]="value" |
The component or directive is applied to the element, exposes that input, and is available to the template. |
| An HTML attribute without a corresponding DOM property | [attr.attributeName]="value" |
The attribute name is correct; a null value removes the attribute. |
Angular’s guide illustrates property binding with [disabled] on a button and [value] on a component. For an attribute binding, it shows [attr.role].
Distinguish NG8002 from NG8001
NG8002 is about an unresolved binding on an element. NG8001: Invalid Element is about an element Angular cannot resolve as a known HTML element or a matching component or directive selector. For NG8001, check the element name and selector, along with the component imports or exports. If the error identifies an element rather than a property or attribute binding, follow that path instead.
#1 Best Overall
Why NO_ERRORS_SCHEMA is usually the wrong fix
NO_ERRORS_SCHEMA allows any property on any element, but Angular discourages its use because it can suppress validation and hide genuine template errors. Fix the misspelled binding, correct the property-versus-attribute syntax, or make the intended component or directive input available. See Angular’s NO_ERRORS_SCHEMA API documentation.
CUSTOM_ELEMENTS_SCHEMA is intended for custom elements; it should not be treated as a fix for an ordinary misspelled binding or an unavailable Angular input. Check Angular’s guidance for the specific custom-element setup if that is what the template uses.
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.
