Angular - 2.25-Appliquer des classes CSS de manière dynamique avec ngClass

La directive ngClass permet d'ajouter ou de retirer dynamiquement des classes CSS sur un élément du template, en fonction de conditions TypeScript. C'est la directive sœur de ngStyle, mais elle agit sur les classes CSS plutôt que sur les styles inline — ce qui respecte mieux la séparation des préoccupations.

La syntaxe la plus fréquente prend un objet dont les clés sont des noms de classes CSS, et les valeurs des booléens : si la valeur est true, la classe est appliquée ; si elle est false, la classe est retirée. Exemple : [ngClass]="{ online: server.status === 'online' }".

Plusieurs formes possibles

• Objet (la plus utilisée) : [ngClass]="{ online: isOnline, active: isActive }".
• Chaîne : [ngClass]="'classe1 classe2'".
• Tableau de chaînes : [ngClass]="['classe1', 'classe2']".
• Méthode : [ngClass]="getClasses()" qui retourne l'un des formats ci-dessus.

Un point pratique : si le nom de la classe contient un tiret (par exemple is-online), il faut l'entourer de guillemets dans l'objet pour que JavaScript l'accepte comme clé : { 'is-online': isOnline }. Pour des classes simples (online, active), les guillemets ne sont pas nécessaires.

ngClass fonctionne en complément des classes statiques : <div class="server" [ngClass]="{ online: isOnline }"> conserve toujours la classe server, et ajoute online uniquement si la condition est vraie. C'est exactement ce qu'on veut dans la plupart des cas.

Comparé à ngStyle, ngClass est généralement préférable parce qu'il s'appuie sur le CSS du fichier .scss du composant : les styles restent groupés, réutilisables, et l'élément HTML ne se retrouve pas pollué par des style="..." inline. C'est le bon réflexe pour styliser dynamiquement en Angular.