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

Message de statut

Syntaxe 2 : Tableau de noms de classes

typescript classList: string[] = ['highlight', 'border-red'];

html

Classes multiples

2. NgStyle

NgStyle définit dynamiquement des styles en ligne (inline styles) pour un élément HTML.

typescript currentSize: number = 24;

html

Texte stylisé

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é).