mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
fa26e7271f
Adds a new agent skill focused on providing fundamentals to coding agents and adhering
to modern Angular code including Signals, Signal Forms and other latest updates.
(cherry picked from commit 8291b16a36)
80 lines
2.1 KiB
Markdown
80 lines
2.1 KiB
Markdown
# Component Host Elements
|
|
|
|
The **host element** is the DOM element that matches a component's selector. The component's template renders inside this element.
|
|
|
|
## Binding to the Host Element
|
|
|
|
Use the `host` property in the `@Component` decorator to bind properties, attributes, styles, and events to the host element. This is the **preferred approach** over legacy decorators.
|
|
|
|
```ts
|
|
@Component({
|
|
selector: 'custom-slider',
|
|
host: {
|
|
'role': 'slider', // Static attribute
|
|
'[attr.aria-valuenow]': 'value', // Attribute binding
|
|
'[class.active]': 'isActive()', // Class binding
|
|
'[style.color]': 'color()', // Style binding
|
|
'[tabIndex]': 'disabled ? -1 : 0', // Property binding
|
|
'(keydown)': 'onKeyDown($event)', // Event binding
|
|
},
|
|
})
|
|
export class CustomSlider {
|
|
value = 0;
|
|
disabled = false;
|
|
isActive = signal(false);
|
|
color = signal('blue');
|
|
|
|
onKeyDown(event: KeyboardEvent) {
|
|
/* ... */
|
|
}
|
|
}
|
|
```
|
|
|
|
## Legacy Decorators
|
|
|
|
`@HostBinding` and `@HostListener` are supported for backwards compatibility but should be avoided in new code.
|
|
|
|
```ts
|
|
export class CustomSlider {
|
|
@HostBinding('tabIndex')
|
|
get tabIndex() {
|
|
return this.disabled ? -1 : 0;
|
|
}
|
|
|
|
@HostListener('keydown', ['$event'])
|
|
onKeyDown(event: KeyboardEvent) {
|
|
/* ... */
|
|
}
|
|
}
|
|
```
|
|
|
|
## Binding Collisions
|
|
|
|
If both the component (host binding) and the consumer (template binding) bind to the same property:
|
|
|
|
1. **Static vs Static**: The instance (consumer) binding wins.
|
|
2. **Static vs Dynamic**: The dynamic binding wins.
|
|
3. **Dynamic vs Dynamic**: The component's host binding wins.
|
|
|
|
## Injecting Host Attributes
|
|
|
|
Use `HostAttributeToken` with the `inject` function to read static attributes from the host element at construction time.
|
|
|
|
```ts
|
|
import {Component, HostAttributeToken, inject} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-btn',
|
|
template: `<ng-content />`,
|
|
})
|
|
export class AppButton {
|
|
// Throws error if 'type' is missing unless injected with { optional: true }
|
|
type = inject(new HostAttributeToken('type'));
|
|
}
|
|
```
|
|
|
|
Usage:
|
|
|
|
```html
|
|
<app-btn type="primary">Click Me</app-btn>
|
|
```
|