NgClass: manipuler les Class avec Angular

Dans cet article, vous allez découvrir comment affecter dynamiquement des class à des éléments HTML du DOM avec le framework Angular. Je vais vous présenter différentes méthodes pour attribuer dynamiquement une class à un élément du DOM. Libre à vous ensuite de choisir celle qui vous convient le mieux.¨

Je vais en premier vous montrer une méthode très simple pour prendre le contrôle de l’attribut « class » d’un element HTLM du DOM.

C’est parti! Alors rappelez-vous, en JS vous pouvez manipuler la propriété « className » avec cette syntaxe:

const div = document.querySelector('div');
div.className = 'active';
console.log(div.className); // 'active'

Jusque-là tout va bien? Parfait!! Mais attention, dans Angular, nous travaillons avec des modèles et des liaisons, et non des API DOM telles que querySelector(). Nous devons donc utiliser une syntaxe différente en passant par le fichier HTML:

<div [className]="'active'"></div>

Angular recherchera alors la propriété JavaScript de className et liera notre expression à celle-ci comme pour n’importe quelle autre propriété.

Maintenant il se peut que nous souhaitions fournir une condition à notre className et utiliser une syntaxe ternaire:

<div [className]="(myCondition) ? 'active' : 'inactive"></div>

Ok. C’est bon? Alors voyons aussi une autre manière de manipuler la propriété className avec Angular.

Property binding

Avec Angular, nous pouvons manipuler les class avec une syntaxe très intéressante pour l’affectation conditionnelle d’une seule class:

<div [class.active]="condition"></div>

Lorsque la condition évaluée est à « true« , la classe « active » sera ajoutée. Sinon la class « active » est alors supprimée.

Directive NgClass

Avec Angular nous pouvons aussi manipuler les class avec une directive spécialement dédiée à cet effect.

Voici la syntaxe de base de cette directive:

<div [ngClass]="'active'"></div>
<div [ngClass]="['active', 'open']"></div>

Mais vous pouvez aussi bien utiliser une syntaxe Objet pour avoir un meilleur contrôle:

<div [ngClass]="'{
'active': condition,
'open': condition
}'"></div>

Pensez aussi que Angular ne permet pas d’utiliser une clé d’objet contenant un tiret, c’est pour cela que je mets les clés entre guillemets pour pouvoir aussi utiliser des noms de Class contenant des tirets.

Conclusion

J’espère que cet article vous aidera à mieux comprendre comment fonctionne l’assignation dynamique de class avec Angular.

L’utilisation de la Directive NgClass permet d’assigner dynamiquement des valeurs pour changer le la valeur de la propriété className d’un element du DOM. C’est une manière très simple de modifier l’apparence de l’interface utilisateur en fonction de ces preference.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.