Angular
Class Bindings

Liaison via un Tableau

Plutôt que de manipuler une longue chaîne de caractères unique, il est souvent plus propre d'utiliser un Tableau (Array) en TypeScript pour gérer une liste de classes.

La Formule

On donne à l'attribut [class] un tableau. Pour s'assurer qu'Angular lise bien ça comme une suite de classes CSS valides, on utilise .join(' ') qui colle les mots avec des espaces :

[class]="monTableau.join(' ')"

Démonstration Interactive

Ajoutez ou retirez des éléments du tableau. Observez le rendu visuel et le contenu de la variable TypeScript userClassArray en temps réel !

Panneau de contrôle
[ "base-card", "highlighted", "elevated" ]

John Doe

Développeur Angular

Le Code Source

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

@Component({
  selector: 'app-user',
  template: `
    <!-- userClassArray.join(' ') assemble les mots du tableau avec un espace -->
    <div [class]="userClassArray.join(' ')">
      <strong>{{ user.name }}</strong>
    </div>

    <button (click)="toggleClass('highlighted')">Highlight</button>
  `,
  styles: [`
    .base-card { border: 1px solid #ccc; padding: 30px; border-radius: 10px; }
    .elevated { box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); transform: translateY(-5px); }
    .highlighted { background-color: #d4edda; border-color: #198754; }
  `]
})
export class UserComponent {
  user = { name: 'John Doe' }; 
  
  // Tableau de classes CSS
  userClassArray = ['base-card', 'highlighted', 'elevated'];

  toggleClass(className: string) {
    const index = this.userClassArray.indexOf(className);
    
    if (index === -1) {
      // La classe n'y est pas, on l'ajoute au tableau
      this.userClassArray.push(className); 
    } else {
      // La classe y est, on la supprime du tableau
      this.userClassArray.splice(index, 1); 
    }
  }

  resetClasses() {
    this.userClassArray = ['base-card', 'elevated', 'highlighted'];
  }
}