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;