Host elements des composants

Angular crée une instance d'un composant pour chaque élément HTML qui correspond au selector du composant. L'élément du DOM qui correspond au selector d'un composant est le host element de ce composant. Le contenu du template d'un composant est rendu à l'intérieur de son 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>

Dans l'exemple ci-dessus, <profile-photo> est le host element du composant ProfilePhoto.

Lier des valeurs au host element

Un composant peut lier des propriétés, des attributs, des styles et des événements à son host element. Cela se comporte exactement comme les bindings sur les éléments à l'intérieur du template du composant, mais se définit avec la propriété host du décorateur @Component :

@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 = signal(false);
  updateValue(event: KeyboardEvent) { /* ... */ }

  /* ... */
}

Les décorateurs @HostBinding et @HostListener

Vous pouvez aussi lier des valeurs au host element en appliquant les décorateurs @HostBinding et @HostListener aux membres de la classe.

@HostBinding vous permet de lier des propriétés et des attributs du host à des propriétés et à des getters :

@Component({/* ... */})
export class CustomSlider {
  @HostBinding('attr.aria-valuenow')
  value: number = 0;

  @HostBinding('tabIndex')
  get tabIndex() {
    return this.disabled ? -1 : 0;
  }

  /* ... */
}

@HostListener vous permet de lier des event listeners au host element. Le décorateur accepte un nom d'événement et un tableau facultatif d'arguments :

export class CustomSlider {
  @HostListener('keydown', ['$event'])
  updateValue(event: KeyboardEvent) {
    /* ... */
  }
}

Conflits de bindings

Quand vous utilisez un composant dans un template, vous pouvez ajouter des bindings à l'élément de cette instance du composant. Le composant peut aussi définir des host bindings pour les mêmes propriétés ou attributs.

@Component({
  ...,
  host: {
    'role': 'presentation',
    '[id]': 'id',
  }
})
export class ProfilePhoto { /* ... */ }

<profile-photo role="group" [id]="otherId" />

Dans ce genre de cas, les règles suivantes déterminent quelle valeur l'emporte :

• Si les deux valeurs sont statiques, le binding de l'instance l'emporte.
• Si une valeur est statique et l'autre dynamique, la valeur dynamique l'emporte.
• Si les deux valeurs sont dynamiques, le host binding du composant l'emporte.

Styliser avec les propriétés personnalisées CSS

Les développeurs s'appuient souvent sur les propriétés personnalisées CSS pour permettre une configuration flexible des styles de leurs composants. Vous pouvez définir ces propriétés personnalisées sur un host element avec un style binding.

@Component({
  /* ... */
  host: {
    '[style.--my-background]': 'color()',
  },
})
export class MyComponent {
  color = signal('lightgreen');
}

Dans cet exemple, la propriété personnalisée CSS --my-background est liée au signal color. La valeur de la propriété personnalisée se met automatiquement à jour chaque fois que le signal color change. Cela affecte le composant courant et tous ses enfants qui s'appuient sur cette propriété personnalisée.

Définir des propriétés personnalisées sur les composants enfants

Il est également possible de définir des propriétés personnalisées CSS sur le host element des composants enfants avec un style binding.

@Component({
  selector: 'my-component',
  template: `<my-child [style.--my-background]="color()" />`,
})
export class MyComponent {
  color = signal('lightgreen');
}

Injecter les attributs du host element

Les composants et les directives peuvent lire les attributs statiques de leur host element en utilisant HostAttributeToken avec la fonction inject.

import { Component, HostAttributeToken, inject } from '@angular/core';

@Component({
  selector: 'app-button',
  ...,
})
export class Button {
  variation = inject(new HostAttributeToken('variation'));
}

<app-button variation="primary">Click me</app-button>