Angular - 2-9 Fully understand the component selector

We have learned a lot about components, templates and the options the framework gives us to declare styles. Let's now focus on the last property of the @Component decorator we still need to explore: the selector. We already mentioned that it must be unique so that you do not accidentally override an existing element, possibly even a component shipped by another package you depend on. But there is also another important detail about the selector worth knowing.

You are not forced to use a selector that targets a custom element. The default selector behaves exactly like a CSS selector. When you write selector: 'app-servers', Angular treats it like the H3 selector in CSS: any <app-servers></app-servers> in your templates will be replaced by the component. Because it follows CSS rules, you are not limited to element selectors. You can also target an attribute by wrapping the name in brackets: selector: '[app-servers]'. If you do this, the original element selector stops working: Angular will throw "app-servers is not a known element". You then need to replace the custom element by a regular HTML element decorated with the app-servers attribute, for example <div app-servers></div>.

The three valid selector forms

  • Element selector (default): selector: 'app-servers'
  • Attribute selector: selector: '[app-servers]'
  • Class selector: selector: '.app-servers'

Selecting by id (#id) or by pseudo-class such as :hover is not supported by Angular. In practice, for components we almost always stick with the element selector because we create our own tags. The attribute and class forms come into play when we will discover directives, a related but distinct feature. It is still useful to know that the selector accepts these CSS-style variants, because some use cases - especially when you want to enhance an existing element rather than introduce a brand new one - benefit from a different selector strategy.

Summary

The component selector is the final property in the @Component decorator that determines how Angular recognizes and renders your component. It must be unique to avoid conflicts with existing HTML elements or third-party components. While element selectors (like `app-server`) are standard and recommended for components, Angular also supports attribute selectors using bracket notation (`[app-server]`) and class selectors using dot notation (`.app-server`), but does not support ID selectors or CSS pseudo-selectors.

Key points

FAQ

Why must the component selector be unique?

A unique selector ensures Angular recognizes your component correctly and prevents accidentally overwriting existing HTML elements or components provided by third-party packages used in your project.

Can I use ID selectors or pseudo-selectors like :hover for my component?

No, Angular does not support ID selectors or CSS pseudo-selectors for component selection. You are limited to element selectors, attribute selectors, and class selectors.

What is the best practice for component selectors?

Element selectors (e.g., `<app-server></app-server>`) are the standard and most common choice for components. Attribute and class selectors have specific use cases but are less conventional.

>