Déprécié

La directive ngStyle va devenir obsolète. Utilisez plutôt les style bindings.

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