Angular
Class Bindings

Combinaison des Approches

La grande force d'Angular, c'est qu'on peut utiliser toutes les méthodes de liaison en même temps sur un seul et même élément HTML ! Angular fusionnera intelligemment toutes les classes finales.

La Formule Ultime

Regardez comment ces différentes syntaxes cohabitent parfaitement sur une seule balise <div> :

<div
  class="user-card"              // 1. Classe statique (fixe)
  [class]="baseClasses"          // 2. Chaine de caractères
  [class.active]="isActive"    // 3. Condition booléenne simple
  [ngClass]="additionalObj"    // 4. Objet de conditions complexes
>...</div>

Démonstration Interactive

Un seul bouton va déclencher des modifications sur la condition simple [class.active]ET sur l'objet [ngClass] en même temps.

Déclencher la magie
// État des variables TypeScript :

isActive = false

additionalClasses = {
  "highlighted": false,
  "shadow": false
}

John Doe

L'Ultime Développeur

Le Code Source

combinaison.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user',
  imports: [CommonModule],
  template: `
    <!-- L'attribut magique avec toutes les combinaisons ! -->
    <div class="user-card"
         [class]="baseClasses"
         [class.active]="isActive"
         [ngClass]="additionalClasses">
      {{ user.name }}
    </div>

    <button (click)="toggleState()">Toggle State</button>
  `
})
export class CombinationComponent {
  user = { name: 'John Doe' };

  // 1. Chaine de caractères classique
  baseClasses = 'elevated';

  // 2. Booléen simple pour [class.active]
  isActive = false;

  // 3. Objet complexe pour [ngClass]
  additionalClasses = {
    highlighted: false,
    shadow: false
  };

  toggleState() {
    // On inverse TOUT en même temps avec un seul clic !
    this.isActive = !this.isActive;
    this.additionalClasses['highlighted'] = !this.additionalClasses['highlighted'];
    this.additionalClasses['shadow'] = !this.additionalClasses['shadow'];
  }
}