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
A host element is the DOM element that matches a component’s or directive’s selector. Angular renders the component’s template inside that element, so a <profile-photo> tag on a page is the host of the ProfilePhoto component. To bind properties, attributes, classes, styles or event handlers to that element, Angular’s current documented method is the host property in component or directive metadata. The older @HostBinding and @HostListener decorators are retained for backwards compatibility.
What a host element is
The host element is the element in a template, or on the page, whose tag, attribute or class matches the selector in the decorator. Consider this component:
@Component({
selector: 'profile-photo',
template: `<img src="avatar.png" alt="Profile photo">`
})
export class ProfilePhoto {}Writing <profile-photo></profile-photo> creates the host, and Angular inserts the img inside it. Anything the component declares about its host is applied to that <profile-photo> element, not to the markup in the template. Directives work the same way: a directive with the selector [highlight] has its host at every element carrying that attribute.
Binding to the host with host metadata
Components and directives accept a host object in their metadata. Each key names a target on the host element, and each value is a static string or an expression evaluated against the component or directive instance. Angular’s host elements guide demonstrates static attributes, attribute, class, style and property bindings, and a keyboard event handler. The table below uses illustrative keys to show the syntax for each kind.
#1 Best Overall
| Target on the host | Example key and value in host |
What the value is |
|---|---|---|
| Static attribute | 'role': 'img' |
A fixed string, set once |
| Attribute binding | '[attr.aria-disabled]': 'disabled' |
An expression; the attribute follows its value |
| Class binding | '[class.active]': 'isActive' |
A boolean expression that adds or removes the class |
| Style binding | '[style.width.px]': 'width' |
An expression for the CSS width, in pixels |
| Property binding | '[id]': 'elementId' |
An expression assigned to the element’s id property |
| Event listener | '(keydown.enter)': 'submit()' |
A method call run when the event fires |
@Component({
selector: 'profile-photo',
template: `<img src="avatar.png" alt="Profile photo">`,
host: {
'role': 'img',
'[attr.aria-disabled]': 'disabled',
'[class.active]': 'isActive',
'[style.width.px]': 'width',
'(keydown.enter)': 'open()'
}
})
export class ProfilePhoto {
disabled = false;
isActive = false;
width = 120;
open() { /* ... */ }
}Global event targets
Event listeners in host can target objects outside the element by using a prefix. Angular documents three: document:, window: and body:. For example, '(document:keydown.escape)': 'close()' listens for the Escape key on the whole document while the component is active.
When host values update
Angular’s Component and Directive API references state that host property bindings are checked during change detection. When a bound value changes, Angular updates the host element on that pass. A host binding therefore behaves like a template binding: the element reflects the current value of the component’s field, and you do not update the DOM by hand.
Legacy decorators and the recommended form
The @HostBinding and @HostListener decorators express the same host property bindings and event listeners as the host object. Angular says they are retained exclusively for backwards compatibility, so existing code that uses them continues to work, while new examples and new components should start from host.
| Goal | Legacy decorator form | Current host form |
|---|---|---|
| Toggle a class | @HostBinding('class.active') isActive = false; |
'[class.active]': 'isActive' |
| Listen for Enter | @HostListener('keydown.enter') open() {} |
'(keydown.enter)': 'open()' |
When you read older code, both forms do the same job. When you write new code, the host object keeps every host binding in one place at the component declaration.
Rank #3
When a template binding and a host binding collide
A component used in a template can receive a binding on its element while the component also declares a host binding for the same property or attribute. Angular documents which value wins:
| Value in the template | Value in host |
Result |
|---|---|---|
| Static | Static | The instance binding (the template value) wins |
| Static | Dynamic | The dynamic value wins |
| Dynamic | Dynamic | The component’s host binding wins |
For example, if the template writes <profile-photo role="img"> and the component’s host sets 'role': 'button', both values are static, so the template’s img is the result. The collision table covers the rules Angular documents; it does not extend them to other combinations.
Reading the host attribute and the host element
Reading a static host attribute with HostAttributeToken
A component or directive can read a static attribute from its own host through HostAttributeToken combined with inject. Given <profile-photo variant="compact">, the following reads the value:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11import { Component, HostAttributeToken, inject } from '@angular/core';
@Component({ selector: 'profile-photo', template: '' })
export class ProfilePhoto {
readonly variant = inject(new HostAttributeToken('variant'));
}Requesting an attribute that the host does not have throws an error. To avoid that, pass the optional flag: inject(new HostAttributeToken('variant'), { optional: true }) returns null when the attribute is absent. This token reads static attributes only; it is not a way to track a changing value.
Retrieving the host DOM element with getHostElement
The getHostElement function returns the host DOM element for a component or directive instance. Angular’s API description defines the host as the element matching the directive’s selector. Pass the instance to get the element:
import { Component, getHostElement } from '@angular/core';
@Component({ selector: 'profile-photo', template: '' })
export class ProfilePhoto {
constructor() {
const element = getHostElement(this);
// element is the <profile-photo> node
}
}Declarative host bindings should cover most needs, because Angular updates them during change detection. Reach for getHostElement only when code genuinely needs the node itself.
Choosing the right tool
| Approach | Purpose | Status in Angular’s documentation |
|---|---|---|
host metadata |
Declarative property, attribute, class, style and event bindings on the host | Recommended for new code |
@HostBinding and @HostListener |
The same host bindings, expressed as decorators | Retained for backwards compatibility |
HostAttributeToken with inject |
Reads a static attribute from the host | Documented API; not described as legacy |
getHostElement |
Retrieves the host DOM element for an instance | Documented API; not described as legacy |
Angular Elements createCustomElement() |
Packages a component as a browser custom element | A separate integration, covered below |
Angular Elements is a different integration
Angular Elements is related to host elements but does a different job. Its createCustomElement() API bridges an Angular component to the browser’s custom-element API. Component inputs become dash-separated, lowercase attributes, so an input named userName is set with user-name, and component outputs are emitted as standard HTML custom events. Use Angular Elements when code outside Angular, or plain HTML, needs to use the component as a custom element. Inside an Angular application, host metadata is the mechanism for binding to the element.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →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.
