Angular
Class Bindings

Liaison via Objet (ngClass)

Voici la méthode la plus puissante et la plus utilisée en entreprise : [ngClass] avec un Objet JSON. Elle permet de gérer facilement plusieurs classes de manière totalement indépendante.

La Formule

On utilise la directive [ngClass] et on lui donne un Objet. La clé est le nom de la classe, la valeur est la condition booléenne :

[ngClass]="{
  'nom-de-la-classe': conditionBoolean,
  'autre-classe': autreCondition
}"

Démonstration Interactive

Modifiez la valeur booléenne dans l'objet via le bouton. Angular appliquera la classe highlighted uniquement si la valeur passe à true.

Panneau de contrôle
// Objet TypeScript actuel
userClassObject = {
  "base-card": true,
  "elevated": true,
  "highlighted": false
}

John Doe

Développeur Angular

Le Code Source

liaison-objet.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Requis pour utiliser ngClass

@Component({
  selector: 'app-user',
  imports: [CommonModule],
  template: `
    <!-- L'attribut [ngClass] reçoit l'objet entier -->
    <div [ngClass]="userClassObject">
      {{ user.name }}
    </div>

    <button (click)="toggleHighlight()">Toggle Highlight</button>
  `,
  styles: [`
    .base-card { border: 1px solid #ccc; padding: 20px; border-radius: 8px; }
    .elevated { box-shadow: 0px 4px 6px rgba(0,0,0,0.1); }
    .highlighted { background-color: #fff3cd; border-color: #ffc107; }
  `]
})
export class UserComponent {
  user = { name: 'John Doe' };

  // L'objet contient la clé (la classe) et sa valeur (true = appliqué, false = ignoré)
  userClassObject: any = {
    'base-card': true,
    'elevated': true,
    'highlighted': false
  };

  toggleHighlight() {
    // On inverse simplement le booléen pour 'highlighted' (passe de false à true)
    this.userClassObject['highlighted'] = !this.userClassObject['highlighted'];
  }
}