JavaScript pour les débutants : Attribution de classes dynamiques avec ngClass

Dans les applications web, il est courant de personnaliser l’apparence d’un élément en fonction d’une condition. Il existe plusieurs façons d’y parvenir, mais si vous travaillez avec Angular, votre choix est clair. La directive ngClass offre une multitude de façons d’assigner dynamiquement des noms de classe à des éléments ou des composants. Sa syntaxe est à la fois concise et supporte une logique assez complexe pour nous fournir un contrôle précis sur à la fois nos noms de classe et les critères pour les définir. Dans ce tutoriel, nous passerons en revue certaines des façons les plus courantes d’assigner dynamiquement une classe CSS à un élément en utilisant la directive ngClass.

Attribution d’une classe CSS en utilisant la liaison de propriété [className]

Bien que cet article concerne la directive ngClass, il est bon de noter que, dans de nombreux cas, vous n’en aurez même pas besoin ! Grâce à la liaison de propriété [className], nous pouvons définir une classe via la propriété JavaScript native className, en utilisant la syntaxe de liaison []. Nous pouvons exécuter n’importe quelle instruction à l’intérieur de cette liaison qui renvoie une chaîne. Cela nous permet de définir une ou plusieurs classes en fonction d’une condition:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

Nous pourrions également construire le nom de la classe à l’exécution:

<div [className]="'class' + someValue"></div>

Lire : 5 Concepts JavaScript Que Tout Développeur Web Devrait Apprendre

Basculer les classes via la liaison de propriété [className]

Certains considèrent que la technique de basculement de classe ci-dessus est un peu plus compliquée qu’elle ne devrait l’être car la inactive-class serait probablement la valeur par défaut. Si vous faites partie de ce groupe, vous pouvez utiliser la syntaxe [class.class-name] pour fournir une condition à évaluer:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Donc, si nous pouvons définir conditionnellement une classe en utilisant la Liaison de Propriété [className], pourquoi avons-nous besoin de la directive ngClass? Comme nous le verrons, la véritable raison d’utiliser la directive ngClass est qu’elle peut nous aider à choisir entre plusieurs classes.

Une plongée profonde dans la directive ngClass

Avant d’aborder la manière d’utiliser la directive ngClass, il serait instructif d’examiner sa définition:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

En regardant le code ci-dessus, nous pouvons maintenant voir que la syntaxe [class]  utilisée précédemment fait en réalité partie de la directive ngClass, via @Input('class'). Remarquez également que la directive ngClass nous offre pas moins de quatre options pour définir des classes dynamiques! 

Examinons chacune d’entre elles en détail.

Fournir une chaîne ou un tableau de chaînes

Attribuer une chaîne ou un tableau de chaînes à ngClass nous permet de lier des classes dynamiques à des variables Angular. Supposons que nous avions une variable appelée activeClass. À l’intérieur de notre fichier .ts, nous pouvons la définir sur un nom de classe connu tel que "text-success" ou "text-failure" en fonction du résultat d’une opération quelconque:

<div 
  [ngClass]="activeClass">
</div>

La syntaxe du tableau est utile pour appliquer plusieurs classes au même élément ou composant:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Utilisation d’une expression évaluée

Une méthode légèrement plus avancée – mais hautement utile – pour utiliser ngClass consiste à fournir une expression. La classe fournie n’est appliquée que si une variable ou une expression évalue à vrai. Pour fournir une expression, vous devez fournir un objet en utilisant des crochets {}. À gauche de chaque deux-points – le nom de la propriété – se trouve la classe qui sera appliquée; à droite – la valeur de la propriété – se trouve l’expression ou la variable que vous souhaitez évaluer. Voici un exemple:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Lire: Réagir, Angular et Vue.js : Quelle est la différence technique ?

Utilisation de l’opérateur ternaire

L’opérateur ternaire vous permet d’assigner une valeur à une variable en fonction d’une expression booléenne – soit un champ booléen, soit une déclaration qui évalue à un résultat booléen. À son niveau le plus basique, l’opérateur ternaire, également connu sous le nom d’opérateur conditionnel, peut être utilisé en remplacement de l’instruction si/alors/sinon lors de la définition d’une variable. 

En fournissant l’opérateur ternaire à ngClass, nous pouvons spécifier deux classes différentes : une si une expression est vraie et une pour fausse. Voici la syntaxe de base de l’opérateur ternaire:

[ngClass]="expression or variable ? true class : false class"

Voici un extrait de code qui utilise l’opérateur ternaire pour définir la classe d’une DIV en fonction de l’égalité de deux variables ou non:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

La signature ngClass Set<string> : Non désirée et non aimée

Set est une nouvelle structure de données introduite dans ES6, similaire à Map. Un ensemble TypeScript nous permet de stocker des valeurs distinctes dans une liste en utilisant des méthodes telles que add(), has() et delete(). Pour une raison quelconque, la signature Set<string> ngClass n’a jamais vraiment été adoptée. Je ne l’ai jamais utilisée, ni connais quelqu’un qui l’ait fait. 

Cela dit, le Set devrait contenir des chaînes représentant des noms de classe à appliquer à l’élément ou au composant. Voici un code TypeScript qui crée un ensemble nommé classes :

//Déclarer une variable membre de classe
public classes = new Set();
 
//Ajouter des noms de classe
classes.add('active').add('text-large');

Conclusion

Dans ce tutoriel, nous avons examiné certaines des façons les plus courantes d’attribuer dynamiquement une classe CSS à un élément en utilisant la directive ngClass. Comme vous pouvez le constater, c’est plutôt puissant.