Component Selectors, Content Projection, and Host Bindings

1. Component selector types: element, attribute, and class

By default, Angular components use an element selector (e.g. <app-button>), which adds a new custom HTML element to the DOM. But Angular also supports attribute and class selectors, which let you attach a component to an existing HTML element instead of creating a new one.

Why use attribute selectors?

When you want to enhance a native HTML element (like <button>) without wrapping it in an extra DOM node, use an attribute selector. This keeps the DOM clean and preserves native element semantics (accessibility, styling, event behavior).

Attribute selector example