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>

<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;
}

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) {}
}

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'));
}

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.