NgStyle: changer le style CSS avec Angular

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

Ajouter des styles CSS avec Angular

Pour comprendre comment fonctionne a gestion dynamique des styles CSS dans Angular, il est important de déjà savoir comment cela ce fait avec du Javascript. Pour ce faire, il faut modifier la propriété style d’un element HTML que l’on à identifier dans le DOM.

document.querySelector('#myDiv').style.color = 'red';

Maintenant on peut regarder comment on gère les style CSS avec Angular.

<div [style.color]="'red'">My DIV to style with Angular</div>

Pour les propriétés composée de plusieurs mot, bah vous faite comme vous feriez avec du CSS normal…

<div [style.background-color]="'red'">My DIV to style with Angular</div>

Et si vous avez plusieurs propriétés à styliser vous pouvez faire ainsi:

<div [style.background-color]="'red'" [style.color]="'white'">My DIV to style with Angular</div>

Voilà pour la l’explication basic et la demo. Maintenant que cela est maitrisé, regardons comment utiliser une propriété dynamique pour assigner un style CSS à un element du DOM.

Assigner une valeur dynamique pour modifier le style CSS d’un element du DOM avec Angular

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div [style.color]="color">My DIV to style with Angular</div>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  color = 'red'
}

Super simple non? Pour utiliser des valeurs dynamique c’est sans guillemets simples supplémentaires, alors que pour des valeurs statiques ils faut les guillemets.

Gestion des conditions pour assigner un style CSS

Avec Angular il est évidement possible de définir des style CSS en fonction de condition. Voici comment cela s’écrit:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div [style.color]="flag ? colorA : colorB">
      My DIV to style with Angular
    </div>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  flag = false;
  colorA = 'red';
  colorB = 'blue';
}

Maintenant que tous cela est bien clair pour vous, je vais vous montrer comment utiliser la directive NgStyle de Angular pour ajouter des style CSS aux element du DOM.

Gestion des styles avec la directive NgStyle

Lors de l’attribution de nombreux styles différents à un élément du DOM, la syntaxe devient assez déroutante et encombrée. C’est pourquoi il existe une manière différente d’attribuer des styles dans Angular à l’aide de la Directive NgStyle. Voici comment cela fonctionne pour les valeur statique:

<div [ngStyle]="{'color': 'red'}">My DIV to style with Angular</div>

Et voici comment cela fonctionne pour l’attribution de valeur dynamiques:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div [ngStyle]="{
          'color': flag ? colorA : colorB;
          'background-color': !flag ? colorA : colorB;
     }">My DIV to style with Angular</div>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  flag = false;
  colorA = 'red';
  colorB = 'blue';
}

Rien de bien méchant hein?? Alors maintenant c’est à vous de jouer et d’utiliser la Directive NgStyle pour la gestion dynamique des style.

Conclusion

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

L’utilisation de la Directive NgStyle permet d’assigner dynamiquement des valeurs pour changer le style d’un élément du DOM. C’est une manière très simple de modifier l’apparence de l’interface utilisateur en fonction de ces préférences.

Tu as aimé cet article et tu veux en apprendre plus sur framework Angular? Tu peux consulter les autres articles qui traitent du même sujet sur mon blog, dans la catégorie Angular, mais je te propose aussi de jeter un oeil sur la formation Angular Entreprise que je propose.

On y abord le framework en profondeur. Cette formation est extrêmement complète et technique, ce qui te donnera un avantage concurrentiel indéniable par rapport à l’autre développeur Angular.
➡️ Formation Angular Entreprise