Angular
Class Bindings

Liaison via Chaîne de Caractères

Dans la leçon précédente, on ajoutait une classe si une condition était vraie ([class.nom]="condition"). Ici, c'est différent : on injecte directement toute une phrase contenant le nom des classes dans l'attribut [class] !

La Formule

On utilise l'attribut [class] (sans spécifier de nom de classe précis) et on lui donne une variable TypeScript qui contient du texte :

[class]="maVariableTexte"
Astuce : Si la variable maVariableTexte contient le texte "btn btn-danger", Angular appliquera ces deux classes à l'élément HTML d'un seul coup.

Démonstration Interactive

Cliquez sur les boutons pour modifier le texte contenu dans la variable TypeScript. Observez le petit badge noir : il vous montre la valeur de la variable en temps réel, ce qui met à jour le rendu de la carte !

Panneau de contrôle
[class]="'base-card elevated highlighted'"

John Doe

Développeur Angular

Le Code Source

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

@Component({
  selector: 'app-user',
  template: `
    <!-- L'attribut [class] injecte tout le texte contenu dans la variable TypeScript -->
    <div [class]="userClasses">
      <strong>{{ user.name }}</strong>
    </div>

    <!-- Boutons pour manipuler le texte de la variable -->
    <button (click)="toggleClass('highlighted')">Highlight</button>
    <button (click)="toggleClass('elevated')">Elevation</button>
  `,
  styles: [`
    /* Classes CSS de base */
    .base-card {
      border: 1px solid #ccc;
      padding: 30px;
      border-radius: 10px;
    }
    /* Classes optionnelles activables */
    .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' }; 
  
  // La variable contient les classes sous forme de texte brut !
  userClasses = 'base-card elevated highlighted';

  // Fonction pour ajouter/retirer un mot de la chaîne de caractères
  toggleClass(className: string) {
    if (this.userClasses.includes(className)) {
      // On retire le mot de la phrase
      this.userClasses = this.userClasses.replace(className, '').trim();
    } else {
      // On ajoute le mot à la phrase
      this.userClasses += ' ' + className;
    }
  }

  resetClasses() {
    this.userClasses = 'base-card elevated highlighted';
  }
}