Angular - 2.24-Stylisation dynamique des éléments avec ngStyle

La directive ngStyle permet d'appliquer dynamiquement des styles CSS inline à un élément du template, en fonction de valeurs calculées dans le composant TypeScript. C'est l'outil idéal quand on a besoin de styliser un élément différemment selon son état (statut, valeur, sélection…).

Elle s'utilise avec un property binding : [ngStyle]="objetDeStyles". L'expression doit retourner un objet JavaScript dont les clés sont les noms de propriétés CSS (en camelCase ou en kebab-case entre guillemets) et les valeurs leurs valeurs CSS.

Trois façons de l'utiliser

• Objet inline : [ngStyle]="{ 'background-color': getColor() }".
• Référence à une méthode : [ngStyle]="getStyles()" où getStyles() retourne { color: this.status === 'OK' ? 'green' : 'red' }.
• Propriété : [ngStyle]="dynamicStyles" où dynamicStyles est un objet du composant.

Exemple typique : afficher la couleur d'un serveur selon son statut. Dans le composant, on définit une méthode getColor() qui retourne 'green' si le serveur tourne, 'red' sinon. Dans le template : <p [ngStyle]="{ backgroundColor: getColor() }">Statut serveur</p>. La couleur de fond du paragraphe s'adapte automatiquement à l'état.

ngStyle est très puissant mais il a un inconvénient : les styles sont appliqués inline sur l'élément HTML, ce qui n'est pas idéal en termes de séparation des préoccupations (style séparé du code). Pour ajouter ou retirer une classe CSS (et donc utiliser les styles définis dans le fichier .scss du composant), il vaut mieux utiliser la directive ngClass, que nous verrons dans la prochaine leçon.