HostAttributeToken pour l'injection d'attributs dans angular

Dans ce chapitre, nous explorons une nouveauté introduite dans Angular 17.3.0 : le HostAttributeToken. Cette classe offre une méthode performante et élégante pour injecter des attributs de l'élément hôte dans vos composants Angular, offrant une alternative améliorée au décorateur @Attribute.

---

Imaginons un scénario où vous souhaitez afficher la version de votre application directement dans un composant Angular, en utilisant un attribut version :

<app-footer version="1.0.0"></app-footer>

Vous auriez peut-être utilisé un décorateur @Input pour accéder à cet attribut, comme dans l'exemple suivant :

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

export type AppVersion = string;

@Component({
  selector: 'app-footer',
  template: `<div>Version: {{version}}</div>`,
  standalone: true,
})
export class AppFooter {
  @Input() version: AppVersion;
}

Cette méthode permet à version d'être passée comme une propriété liée, mais cela implique que Angular doit vérifier et mettre à jour cette propriété à chaque cycle de détection de changement, ce qui peut être inutilement coûteux en performances si la propriété version ne change jamais après l'initialisation.

Une approche plus performante serait d'utiliser le décorateur @Attribute pour injecter la valeur de l'attribut directement dans le constructeur de votre composant :

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

export type AppVersion = string;

@Component({
  selector: 'app-footer',
  template: `<div>Version: {{version}}</div>`,
  standalone: true,
})
export class AppFooter {
  constructor(@Attribute('version') public version: AppVersion) {}
}

Bien que fonctionnel, cette méthode nécessite la définition du constructeur uniquement pour passer l'attribut, ce qui peut être simplifié avec l'introduction de HostAttributeToken.

Utilisons maintenant HostAttributeToken avec la fonction inject() pour rendre le code plus propre et éviter l'usage du constructeur :

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

export type AppVersion = string;

@Component({
  selector: 'app-footer',
  template: `<div>Version: {{version}}</div>`,
  standalone: true,
})
export class AppFooter {
  version: AppVersion = inject(new HostAttributeToken('version'));
}

Dans cet exemple, la propriété version est initialisée directement avec la valeur de l'attribut version de l'élément hôte, en utilisant la fonction inject(). Ce changement apporte non seulement une simplification du code mais assure également que la valeur est lue une seule fois, améliorant les performances par une réduction des vérifications inutiles durant les cycles de détection de changements.

Point à retenir

• HostAttributeToken : Permet l'injection simplifiée et performante des attributs de l'hôte directement dans les propriétés des composants.
• @Attribute : Décorateur permettant l'injection d'attributs lors de l'initialisation du composant, sans réévaluation ultérieure.
• Optimisation : Utiliser HostAttributeToken réduit les vérifications inutiles dans les cycles de détection de changements, optimisant les performances de l'application.

Les bonnes pratiques

• Choix de l'injection : Optez pour HostAttributeToken pour les attributs statiques qui ne nécessitent pas de réévaluation après le chargement initial du composant.
• Gestion des exceptions : Préparez-vous à gérer les erreurs, car HostAttributeToken génère des exceptions si l'attribut spécifié est absent, à la différence de @Attribute qui retourne simplement null.