Les Class Bindings dans Angular

Comprendre comment gérer dynamiquement les classes CSS est essentiel pour créer des interfaces utilisateur modernes et interactives. Dans ce tutoriel, nous allons voir comment Angular nous permet de manipuler les classes CSS de manière élégante et efficace.

1. Liaison conditionnelle d'une classe

La façon la plus simple de lier une classe est d'utiliser la syntaxe [class.nom-classe]="condition".

user.component.ts

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
    <div [class.active]="isUserActive">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  user: User = {
    id: 1,
    name: 'John Doe',
    username: 'johndoe',
    email: '[email protected]'
  };
  
  isUserActive = true;
}

user.ts

export interface User {
    id: number;
    name: string;
    username?: string;
    email: string;
    address?: {
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo: {
            lat: string;
            lng: string;
        }
    };
    phone?: string;
    website?: string;
    company?: {
        name: string;
        catchPhrase: string;
        bs: string;
    };
}

ASTUCE

Cette approche est particulièrement utile quand vous avez besoin de basculer une seule classe en fonction d'une condition.

2. Liaison directe avec une chaîne de caractères

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div [class]="userClasses">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  userClasses = 'card elevated highlighted';
}

3. Liaison avec un tableau

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div [class]="userClassArray">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  userClassArray = ['card', 'elevated', 'highlighted'];
}

4. Liaison avec un objet

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div [class]="userClassObject">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  userClassObject = {
    'card': true,
    'elevated': true,
    'highlighted': false
  };
}

ATTENTION

Lors de l'utilisation d'objets ou de tableaux pour les classes, Angular utilise l'opérateur === pour détecter les changements. Il faut créer une nouvelle instance de l'objet ou du tableau pour que les modifications soient prises en compte.

5. Combinaison de plusieurs approches

Angular permet de combiner différentes approches de liaison de classes :

import { Component } from '@angular/core';

@Component({
  template: `
    <div class="user-card" 
         [class]="baseClasses" 
         [class.active]="isActive">
      {{ user.name }}
    </div>
  `
})

BONNES PRATIQUES

• Utilisez la liaison conditionnelle ([class.nom-classe]) pour les cas simples
• Préférez l'approche objet pour gérer plusieurs classes conditionnelles
• Gardez les classes statiques dans l'attribut class classique