Skip to content

Manipuler le style CSS avec la directive ngStyle

Comme avec ngClass, nous pouvons changer l'apparence avec ngStyle. La différence est qu'on modifie l'attribut style. Pas besoin de fichier CSS externe :

ts
import { Component } from '@angular/core';
import { NgStyle } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgStyle],
  template: `
    <p [ngStyle]="{color: color}">{{result}}</p>
    <button (click)="up()">Up</button>
  `
})
export class AppComponent {
  result = 0;
  color = 'red';

  up() {
    this.result++;
    this.color = this.result % 2 ? 'red' : 'green';
  }
}

ngStyle est un objet avec la propriété CSS avec sa valeur CSS.

Deux moyens d'écrire les valeurs CSS : Soit en kebab case : font-weight Soit en camel case : fontWeight

[Vidéo] Les signaux dans Angular en 3mn

En juillet, recevez notre newsletter avec les dernières actualités et, en avant-première, un lien vers notre prochaine vidéo sur les signaux dans Angular.