Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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".

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;
}
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

ts
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

ts
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

ts
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 :

ts
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

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !