Déprécié

La directive ngClass va devenir obsolète. Utilisez plutôt les class bindings.

Manipuler efficacement les classes CSS

La directive ngClass permet de changer la classe class et donc, de changer l'apparence

Voici un composant simple.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgClass],
  template: `
    <p [ngClass]="{red: result%2, green: !(result%2)}">{{result}}</p>
    <button (click)="up()">Up</button>
  `,
  styles: `
    .red {
      color: red;
    }
    .green {
      color: green;
    }
  `
})
export class AppComponent {
  result = 0

  up() {
    this.result++;
  }
}

La directive ngClass peut avoir deux valeurs :

• soit un tableau de classes. Par exemple ['red'] indiquera que l'élément aura la classe red;
• soit un objet avec les classes en clé et un booléen en valeur. Par exemple : {red: true} indiquera que l'élément aura la classe red;