TIP: This guide assumes you've already read the Essentials Guide. Read that first if you're new to Angular.
Angular creates an instance of a component for every HTML element that matches the component's selector. The DOM element that matches a component's selector is that component's host element. The contents of a component's template are rendered inside its host element.
// Component source@Component({ selector: 'profile-photo', template: ` <img src="profile-photo.jpg" alt="Your profile photo" /> `,})export class ProfilePhoto {}<!-- Using the component --><h3>Your profile photo</h3><profile-photo /><button>Upload a new profile photo</button><!-- Rendered DOM --><h3>Your profile photo</h3><profile-photo> <img src="profile-photo.jpg" alt="Your profile photo" /></profile-photo><button>Upload a new profile photo</button>In the above example, <profile-photo> is the host element of the ProfilePhoto component.
Binding to the host element
A component can bind properties, attributes, styles and events to its host element. This behaves
identically to bindings on elements inside the component's template, but instead defined with
the host property in the @Component decorator:
@Component({ ..., host: { 'role': 'slider', '[attr.aria-valuenow]': 'value', '[class.active]': 'isActive()', '[style.background]' : `hasError() ? 'red' : 'green'`, '[tabIndex]': 'disabled ? -1 : 0', '(keydown)': 'updateValue($event)', },})export class CustomSlider { value: number = 0; disabled: boolean = false; isActive = signal(false); hasError =