Dans Angular, les directives d'attribut jouent un rôle essentiel en modifiant dynamiquement le comportement et l'apparence des éléments sans altérer la structure du DOM. Deux des directives d'attribut les plus couramment utilisées sont ngClass et ngStyle. Ces directives offrent des moyens flexibles de contrôler les styles des éléments et les classes CSS en fonction de l'état du composant.

Qu'est-ce que ngClass ?

Ceci est particulièrement utile lorsque vous souhaitez modifier l'apparence d'un élément en réponse à des changements de données — par exemple, mettre en surbrillance un élément actif ou appliquer des styles en fonction du statut.

ngClass prend en charge la syntaxe objet, les tableaux de chaînes de caractères et les fonctions qui renvoient ces formats pour appliquer dynamiquement des classes.

Syntaxe objet

Utiliser un objet où les clés sont les noms de classes et les valeurs sont des conditions booléennes. Si la condition est true, la classe est appliquée.

Dans cet exemple, des classes sont ajoutées ou supprimées en fonction de la valeur de la propriété isActive dans le composant.

Si isActive est true, la classe active est ajoutée et inactive est supprimée. Si isActive est false, c'est l'inverse.

Tableau de chaînes de caractères

Utiliser un tableau où chaque chaîne de caractères représente un nom de classe CSS qui sera ajouté à l’élément. Cette méthode est utile pour appliquer plusieurs classes dynamiquement sans conditions.

Ici, les classes répertoriées dans le tableau sont appliquées à l’élément.

L’utilisation d’un tableau est utile lorsque l’on souhaite attribuer dynamiquement plusieurs classes — en particulier lorsque le nombre de classes peut varier.

Fonction

Utiliser une fonction qui retourne l’un des formats pris en charge : un objet, un tableau de chaînes de caractères, ou une chaîne unique. Ceci est utile lorsque les classes appliquées dépendent d’une logique plus complexe ou de conditions dynamiques.

ngClass peut également accepter une fonction qui retourne un objet, un tableau ou une chaîne selon la logique que vous définissez.

Dans ce cas, la méthode getClass() retourne un objet avec les noms de classes CSS comme clés et des conditions booléennes comme valeurs.

• Si isError est true, la classe error-class sera appliquée ;
• Si isSuccess est true, la classe success-class sera appliquée ;
• Si les deux sont false, aucune classe ne sera ajoutée.

Qu'est-ce que ngStyle ?

Avec ngStyle, il est possible de modifier des propriétés telles que la couleur d’arrière-plan, la police, la taille, le positionnement, et bien plus — directement depuis le composant.

Fonctionnement de ngStyle

ngStyle accepte un objet dont les clés correspondent aux noms des propriétés CSS et les valeurs à des expressions évaluées lors du rendu.

Si une expression retourne une valeur, celle-ci est appliquée à la propriété CSS correspondante de l’élément.

Exemple avec un objet de styles

Dans cet exemple, la couleur du texte et la taille de la police de l’élément sont modifiées dynamiquement :

Si textColor est red et fontSize est 20px, ces styles seront appliqués à l’élément. Cette méthode permet de combiner facilement plusieurs styles dans une seule expression pour une plus grande flexibilité.

Exemple utilisant une variable et une expression

Pour appliquer des styles en fonction d'une logique, il est possible d'utiliser des expressions directement dans le template :

Si isActive est true, la couleur de fond sera verte ; si false, elle sera rouge. Ici, un opérateur ternaire est utilisé pour rendre la logique concise et expressive.

Exemple avec une valeur dynamique

Les expressions dans ngStyle peuvent également être basées sur des méthodes. Vous pouvez utiliser des méthodes du composant pour calculer dynamiquement les valeurs de style :

Dans cet exemple, la méthode getDynamicStyle() retourne un objet de style basé sur la valeur actuelle de isDarkMode.

Cela est particulièrement utile lorsque les styles dépendent de conditions externes telles que les préférences utilisateur, l'heure de la journée ou les thèmes de l'application.

Quand utiliser ngClass vs ngStyle ?

• Utiliser ngClass lors de l'utilisation de classes CSS prédéfinies. Ceci est idéal lorsque les styles sont réutilisés à plusieurs endroits et que vous souhaitez un contrôle centralisé des styles via votre feuille de style ;

• Utiliser ngStyle lorsque vous devez appliquer des styles de manière dynamique et directe — par exemple, pour définir des couleurs, des dimensions ou d'autres propriétés visuelles qui ne sont pas liées à des classes réutilisables.

En combinant ngClass et ngStyle, il est possible de contrôler facilement et efficacement l'apparence et le comportement des éléments en fonction des données du composant — sans avoir à mettre à jour manuellement le DOM.