Angular - 2.21-Comprendre les Directives

Les directives sont, après les composants, l'une des briques fondamentales d'Angular. Une directive est une « instruction » que l'on applique à un élément du template HTML pour modifier son comportement ou son apparence à l'exécution. Vous en avez déjà manipulé une : ngModel, qui ajoute le two-way binding à un input.

Angular distingue deux grandes familles de directives : les directives d'attribut et les directives structurelles. La différence saute aux yeux dans la syntaxe : les directives structurelles se reconnaissent à l'astérisque (*) qui précède leur nom.

Les deux familles

• Directives d'attribut : modifient l'apparence ou le comportement d'un élément existant, sans toucher à sa présence dans le DOM. Exemples : ngStyle, ngClass, ngModel.
• Directives structurelles : modifient la structure du DOM en ajoutant ou supprimant des éléments. Exemples : *ngIf (affichage conditionnel), *ngFor (boucle), *ngSwitch.
• Distinction syntaxique : seules les directives structurelles utilisent l'astérisque. C'est une indication visuelle qui dit à Angular « cette directive va manipuler le DOM ».

Dans les leçons suivantes, nous allons explorer en détail les directives intégrées les plus utilisées : *ngIf avec sa condition optionnelle else, ngStyle pour appliquer un style dynamiquement, ngClass pour ajouter ou retirer une classe CSS selon une condition, et enfin *ngFor pour produire des listes à partir d'un tableau. Ces quatre directives couvrent l'écrasante majorité des besoins courants en templating Angular.

Au-delà des directives intégrées, Angular permet aussi de créer ses propres directives personnalisées, pour encapsuler une logique de présentation réutilisable (mise en surbrillance, gestion des permissions UI, raccourcis clavier, etc.). Nous y reviendrons plus tard dans le cours, une fois les directives natives bien maîtrisées.