Directives

Une directive peut modifier l'apparence d'un élément, son comportement ou sa place dans le DOM. Angular fournit plusieurs directives intégrées, et vous pouvez écrire les vôtres.

Quand utiliser une directive

Les directives sont les plus efficaces quand elles encapsulent un comportement réutilisable que vous voulez appliquer à un élément ou à un composant existant.

Exemples courants :

• Appliquer la même apparence ou le même comportement à de nombreux éléments, comme l'autofocus ou une infobulle.
• Lire ou modifier le DOM, les attributs ou les classes du host element.
• Ajouter un comportement à un composant dont vous n'êtes pas propriétaire sans modifier son code source.

Si vous devez rendre votre propre balisage ou gérer une partie de l'interface avec son propre template, tournez-vous vers un composant, une directive spécialisée dotée de son propre template.

Un exemple rapide

Supposons que vous vouliez que des éléments soient mis en surbrillance quand l'utilisateur les survole avec la souris, en passant leur couleur d'arrière-plan au jaune. Plutôt que de répéter la même logique de gestion d'événements sur chaque élément, vous pouvez regrouper ce comportement dans une directive et l'appliquer partout où vous en avez besoin.

La directive appHighlight suivante définit la couleur d'arrière-plan du host element quand la souris entre et l'efface quand la souris sort :

import {Directive, signal} from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'isHovered.set(true)',
    '(mouseleave)': 'isHovered.set(false)',
    '[style.background-color]': 'isHovered() ? "yellow" : null',
  },
})
export class HighlightDirective {
  protected isHovered = signal(false);
}

Les métadonnées host écoutent les événements de la souris pour mettre à jour le signal isHovered, et lient le style background-color du host element à la valeur du signal.

Appliquez la directive en ajoutant son selector comme attribut sur un élément :

<p appHighlight>Highlight me!</p>

Chaque élément qui porte l'attribut appHighlight reçoit le même comportement au survol, avec une logique définie en un seul endroit.

Types de directives

Angular possède trois principaux types de directives :

Et ensuite ?

Apprenez-en plus sur chaque type de directive dans les guides suivants.