Angular propose un ensemble de directives intégrées telles que ngIf, ngFor et ngClass. Cependant, il est également possible de créer vos propres directives personnalisées pour gérer des tâches spécifiques dans votre application. Examinons ensemble comment en construire une à l'aide d'un exemple pratique.

Générer la directive personnalisée

Il est recommandé d'organiser votre code en créant un dossier dédié pour vos directives. Appelons-le directives.

Cette commande crée un nouveau dossier nommé directives dans le répertoire app et y ajoute le fichier de la nouvelle directive :

• highlight-on-complete.directive.ts – contient la logique de la directive ;

• highlight-on-complete.directive.spec.ts – fichier de test unitaire (vous pouvez le supprimer si non nécessaire).

Voici à quoi ressemble la structure de base de la directive :

Définir le comportement de la directive

Cette directive mettra en surbrillance un élément de tâche en vert s'il est marqué comme terminé. Sinon, elle supprimera les styles.

Pour indiquer à Angular que cette classe est une directive, on la décore avec @Directive :

@Directive({
  selector: '[appHighlightOnComplete]'
})

Le sélecteur [appHighlightOnComplete] signifie que la directive sera utilisée comme un attribut, et non comme une balise ou une directive structurelle.

Dans votre HTML, vous l'appliquerez ainsi :

<div [appHighlightOnComplete]="task.completed"></div>

Faire réagir la directive aux changements

Pour détecter les modifications de l'entrée completed, nous implémentons l'interface OnChanges :

Nous définissons également une propriété d'entrée pour recevoir la valeur depuis le composant :

Ce que cela fait :

• Informe Angular que la valeur sera fournie depuis le template (précédemment, nous avons passé task.complete depuis le template) ;

• Lie la propriété interne completed de la directive à la valeur transmise depuis le template ;

• Définit une valeur par défaut à true (qui sera remplacée dès que les données réelles seront reçues).

Accès sécurisé au DOM

Angular utilise l'injection de dépendances pour fournir l'accès au DOM et aux outils de rendu.

Dans le constructeur, nous injectons :

ElementRef nous donne une référence à l’élément DOM hôte. Renderer2 nous permet de modifier en toute sécurité les styles et attributs sans manipuler directement le DOM.

Réagir aux changements avec ngOnChanges

Implémentation de la logique principale dans ngOnChanges, qui s’exécute à chaque modification de la valeur d’entrée.

Implémentation complète :

La méthode ngOnChanges est déclenchée chaque fois qu'Angular détecte des modifications des propriétés d'entrée de la directive.

Dans ce cas, elle réagit aux mises à jour de la valeur completed transmise depuis le template. Si completed est true, la directive ajoute une bordure verte et un fond vert clair à l'élément. Si la valeur est false, ces styles sont supprimés, rendant à l'élément son apparence d'origine. Cela fournit une indication visuelle des tâches terminées.

Cette directive personnalisée permet d'encapsuler le comportement de style de manière réutilisable et propre. Vous pouvez désormais l'appliquer à n'importe quel élément de votre application, sans dupliquer la logique dans plusieurs composants. C'est un excellent exemple de la façon dont le système de directives d'Angular permet d'écrire un code plus modulaire et maintenable.