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 error NG0300 (“Selector Collision”) means that more than one component selector matches the same element in a template. Angular cannot choose which component to create for that element, so it reports the conflict at runtime. The fix is to find the component selectors that overlap and make them unambiguous, which sometimes means changing a selector in a library you import rather than in your own code.
What NG0300 actually means
Angular documents NG0300 as a runtime diagnostic. It fires when an element matches multiple component selectors. Angular’s error index lists NG0300 as a runtime error, and its compile-time counterpart is NG8023, which reports the same ambiguity during the build when several components in a compilation scope match one template element (see Angular’s Error Encyclopedia).
The distinction that matters is between components and directives. Directives can be combined on a single element, so an element may legitimately carry several directive selectors at once. A component, however, is the view-bearing building block, and only one component can be associated with a given element (see the Component API reference). NG0300 is raised when two or more component selectors claim the same element. It is not a general prohibition on overlapping selectors.
Angular’s Component selectors guide states the rule directly: “An element can match exactly one component selector.”
#1 Best Overall
The two shapes of the collision
NG0300 usually appears in one of two forms. Knowing which one you have tells you where to look.
Two components declare the same selector
The simplest case is two component classes that use the same selector string, for example selector: 'app-card' in two different files. Both components are candidates for every <app-card> element, and Angular has no basis for choosing one. This often happens after copying a component and forgetting to update its selector.
One element satisfies two different component selectors
The second case is subtler. Each selector is unique on its own, but a single element carries attributes or classes that match two different components. Angular’s own example uses two attribute selectors on one <button>, each belonging to a different component. An illustrative version looks like this:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →- Component A:
selector: 'button[appPrimary]' - Component B:
selector: 'button[appTooltip]' - Template:
<button appPrimary appTooltip>Save</button>
Here neither selector duplicates the other, yet the element matches two component selectors, so NG0300 is raised. Removing one attribute, or making one selector narrower, resolves it.
Rank #3
How to diagnose NG0300
- Read the full message. The error names the element or selector information involved. Use the element name from the message to locate the template where the collision happens.
- Search your own component declarations. Run a search such as
grep -rn "selector:" src/from the project root and inspect every component whose selector matches the one in the error. Look for exact duplicates first. - Check the element’s attributes and classes. In the template, list every attribute and class on the failing element. If two different components each match one of them, the collision is the second shape described above.
- Inspect imported component libraries. If no duplicate turns up in your own code, the conflicting component probably comes from a library. Angular’s guidance names Angular Material as an example of a library whose components may be involved. Check the library’s component selectors and the attributes it expects on the element.
- Confirm which components are in scope. For standalone components, check the component’s
importsarray. For NgModule-based code, follow thedeclarationsandexportsof the NgModules that bring components into scope. - Re-run the same page, test, or build that produced the error to confirm it has gone.
Choosing the right fix
Do not rename a selector until you have decided which component the template should use. Angular’s stated goal is unique selectors, so that the element renders the component you intended. Work through these questions in order:
- Is it a duplicate declaration? If two of your own components use the same selector, rename the one that should not own that name. Pick a name that carries your project prefix.
- Is the element using the wrong attribute? If the template adds an attribute by accident, remove it from the element.
- Is the selector meant to be public? If other teams or a library depend on the selector, do not rename it. Change the template, or narrow your own component’s selector so it matches only the intended element.
- Is the conflict with a library component? Do not edit library source files. Remove or change the element’s attribute, or wrap the element so that only the intended component matches.
Narrowing a selector with :not() can separate two components, but use it only when the narrowed selector still describes the component’s real contract. A selector that is hard to read usually signals a design problem that is better fixed by renaming.
Selector rules that affect the collision
Angular matches component selectors statically at compile time. Changing the DOM later through bindings or DOM APIs does not change which component matched. Selector matching is case-sensitive.
Angular supports only a subset of CSS selector syntax for components. It accepts:
- Element names
- Attributes, including exact attribute values
- Classes
- The
:not()pseudo-class - Comma-separated alternatives
It does not support combinators or arbitrary CSS selectors. Angular recommends a custom element name with a hyphen for most components, a short and consistent project prefix (the CLI default is app-), and no use of ng, which Angular reserves for its own APIs. Attribute selectors make sense when a component adds behavior to a native element such as a button.
Nearby diagnostics that look similar
Several Angular diagnostics involve components and selectors, and they describe different problems.
| Diagnostic | When it appears | What it indicates | First step |
|---|---|---|---|
| NG0300 Selector Collision | Runtime | Multiple component selectors match one element | Find the element and every component selector that matches it |
| NG8023 Multiple Components Match Same Element | Template compilation (build time) | Multiple components in the compilation scope match one template element | Use the component and element details in the compiler message |
| NG0912 component ID generation collision | Warning | Components with identical metadata produce the same generated component ID | Compare the metadata of the components named in the warning, not only their selectors |
| NG8001 Invalid Element | Compile time | An element cannot be resolved to any component or directive selector, or a component is not correctly imported or exported | Check imports and exports; this is not an ambiguity error |
A shared selector can appear in an NG0912 warning as one of several matching metadata fields, but NG0912 is about identical metadata producing one ID. NG0300 is about competing component matches. Check the diagnostic’s own details before choosing a fix. The NG0912 and NG8001 pages are on angular.dev and angular.dev.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsSources and version notes
Angular’s official error index and selector guide establish the rule and the diagnostic classification described here. The text of the NG0300 and NG8023 pages was checked against a mirror of Angular’s documentation source, because the NG0300 page was not directly available on angular.dev at the time of writing: see the NG0300 page mirror and the NG8023 page mirror. This information reflects Angular’s documentation as of October 2026. If your project uses an older Angular version, confirm the diagnostic’s wording and behavior against that version’s documentation.
In short: find every component selector that matches the failing element, decide which component should own it, and then make the selectors unambiguous.
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.
