Directives Angular : types, fonctionnement et exemples

Qu’est-ce qu’une directive Angular ?

En Angular, une directive est une classe TypeScript qui permet d’ajouter, modifier ou enrichir le comportement d’éléments HTML dans le DOM (Document Object Model).

Contrairement aux composants Angular, les directives n’ont pas de vue propre (pas de template HTML).
Elles interviennent directement sur l’affichage ou le comportement d’un élément existant.

💡 En résumé :
Les directives Angular sont des outils puissants pour manipuler le DOM et rendre les pages dynamiques et interactives.

---

Les trois types de directives dans Angular

1. Directives structurelles

➡ But : modifier la structure du DOM (ajouter, supprimer, répéter des éléments).
Impact : la structure HTML affichée change en fonction des conditions.

Exemples courants :

• *ngIf → affiche ou cache un élément selon une condition.
• *ngFor → répète un élément pour chaque élément d’une liste.

Particularités :

• Toujours préfixées d’un astérisque (*) dans le template HTML.
• Utilisées pour créer des vues conditionnelles ou itératives.

---

2. Directives d’attribut

➡ But : modifier l’apparence ou le comportement d’un élément HTML sans changer sa structure.

Impact : elles agissent comme des attributs dynamiques en ajustant styles, classes CSS, propriétés.

Exemples courants :

• [ngStyle] → applique des styles CSS dynamiques.
• [ngClass] → ajoute ou supprime des classes CSS.

Particularités :

• S’écrivent entre crochets [ ] dans le HTML.
• Parfaites pour personnaliser l’affichage selon les données.

---

3. Composants

➡ But : un composant Angular est en réalité une directive avec un template complet.
Impact : contrôle comportement + affichage via un template HTML et des styles CSS.

Exemple : app-root (point d’entrée d’une appli Angular).

Particularités :

• Toujours associés à un template HTML + CSS.
• Forme la plus courante de directive dans Angular.

---

Déclaration et utilisation d’une directive Angular

Une directive se définit avec le décorateur @Directive() :

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

@Directive({
  selector: '[survolBleu]'
})
export class SurvolBleuDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'color', 'lightblue');
  }
}

Utilisation dans un template HTML :

<p survolBleu>Texte survolé en bleu clair</p>

---

Fonctionnalités clés des directives Angular

• Sélecteur (selector) : détermine les éléments HTML ciblés ([monAttribut], .maClasse, balise).
• Manipulation du DOM : via ElementRef et Renderer2.
• Écoute d’événements : avec @HostListener.
• Paramètres dynamiques : grâce à @Input().

---

Résumé des catégories de directives Angular

Type de directive	Fonction clé	Exemples
Structurelles	Modifient le DOM (ajout/suppression)	*ngIf, *ngFor
D’attribut	Modifient style/comportement	[ngStyle], [ngClass]
Composants	Directive + vue complète	app-root

---

En résumé

• Directives structurelles → gèrent la structure de l’interface (ajout/suppression d’éléments).
• Directives d’attribut → modifient l’apparence/le comportement sans toucher à la structure.
• Composants Angular → directives avec une vue complète.