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 :

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

Manipuler le style CSS avec la directive ngStyle ​

Manipuler le style CSS avec la directive ngStyle