14. Directives d'attribut intégrées (NgClass, NgStyle)
Les directives Angular sont des classes qui ajoutent un comportement supplémentaire aux éléments de l'application. Les directives d'attribut modifient l'apparence ou le comportement d'un élément.
Qu'est-ce qu'une directive d'attribut ?
Les directives d'attribut ressemblent et se comportent comme des attributs HTML standards (ex: ngModel, NgClass). Elles sont liées en utilisant la syntaxe de liaison de propriété [ ].
1. NgClass
NgClass ajoute ou supprime dynamiquement des classes CSS en fonction de l'état du composant ou d'une expression booléenne.
Syntaxe 1 : Objet Clé-Valeur
Utilisez un objet où la clé est le nom de la classe (string) et la valeur est une expression booléenne.
typescript export class StatusComponent { isUrgent: boolean = true; isError: boolean = false; }
html
<!-- Si isUrgent est vrai, la classe 'urgent' est ajoutée. Si isError est vrai, la classe 'error' est ajoutée. --> <div [ngClass]="{ 'urgent': isUrgent, 'error': isError, 'active': true }"> Message de statut </div>Syntaxe 2 : Tableau de noms de classes
typescript classList: string[] = ['highlight', 'border-red'];
html
<div [ngClass]="classList">Classes multiples</div>2. NgStyle
NgStyle définit dynamiquement des styles en ligne (inline styles) pour un élément HTML.
typescript currentSize: number = 24;
html
<!-- Définition de styles inline multiples basés sur les propriétés du composant --> <p [ngStyle]="{ 'font-size.px': currentSize, 'color': isUrgent ? 'red' : 'green' }"> Texte stylisé </p>Note : Lors de la définition de valeurs en pixels, vous pouvez utiliser 'font-size' (string) ou 'font-size.px' (string avec suffixe d'unité).