Angular
Class Bindings

Liaison Conditionnelle d'une Classe

Vous voulez qu'un élément change d'apparence selon une condition (par exemple : le bouton devient rouge s'il y a une erreur) ? C'est exactement ce que permet le Class Binding.

La Formule Magique

Pour ajouter ou retirer dynamiquement une classe CSS nommée ma-super-classe, on utilise des crochets autour de "class" :

[class.nom-de-la-classe]="condition"
Si la condition est vraie (true), Angular ajoute la classe.
Si la condition est fausse (false), Angular retire la classe.

Démonstration Interactive

Essayez d'activer ou désactiver cet utilisateur. Observez comment la bordure, la couleur et le badge changent d'apparence instantanément grâce au Class Binding !

Actif
J

John Doe

@johndoe

john@example.com

Le Code Source

liaison-conditionnelle.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  template: `
    <!-- L'attribut [class.user-active] sera ajouté uniquement si isUserActive est true -->
    <div class="card" [class.user-active]="isUserActive">
      
      <h4>{{ user.name }}</h4>
      <p>{{ user.email }}</p>

      <!-- Le bouton inverse la variable boolean -->
      <button (click)="toggleUserStatus()">Changer le statut</button>
    </div>
  `,
  styles: [`
    /* Le style par défaut de la carte */
    .card {
      border: 2px solid gray;
      padding: 20px;
    }
    
    /* Le style qui s'applique UNIQUEMENT quand la classe est active */
    .user-active {
      border-color: green;
      background-color: #f0fff0;
    }
  `]
})
export class UserProfileComponent {
  // Notre utilisateur de test
  user = {
    name: 'John Doe',
    email: 'john@example.com'
  };

  // La variable conditionnelle (vraie ou fausse)
  isUserActive = true;

  // Méthode appelée au clic du bouton
  toggleUserStatus() {
    this.isUserActive = !this.isUserActive; // Inverse vrai/faux
  }
}