Les Style Bindings dans Angular

Tout comme les classes, Angular permet également de manipuler directement les styles CSS de manière dynamique. C'est comme avoir un styliste qui ajuste en temps réel la tenue d'une personne en fonction des circonstances !

1. Liaison d'une propriété style unique

La syntaxe la plus simple pour lier un style est d'utiliser [style.propriété]="valeur".

user.component.ts

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

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
    <div [style.display]="isVisible ? 'block' : 'none'">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  isVisible = true;
}

2. Liaison avec unités

Pour les propriétés qui nécessitent des unités, Angular propose une syntaxe spéciale :

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

@Component({
  selector: 'app-user',
  template: `
    <div [style.height.px]="cardHeight">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  cardHeight = 200;
}

ASTUCE

Cette syntaxe évite d'avoir à concaténer l'unité manuellement. Angular s'en charge pour nous !

3. Liaison multiple avec une chaîne de caractères

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

@Component({
  selector: 'app-user',
  template: `
    <div [style]="userCardStyles">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  userCardStyles = 'display: flex; padding: 16px; background-color: #f5f5f5';
}

4. Liaison avec un objet de styles

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

@Component({
  selector: 'app-user',
  template: `
    <div [style]="userStyles">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  userStyles = {
    display: 'flex',
    padding: '16px',
    backgroundColor: 'var(--primary-color)',
    fontSize: '1.2rem'
  };
}

ATTENTION

Comme pour les classes, lors de l'utilisation d'un objet pour les styles, Angular utilise l'opérateur === pour la détection des changements. Pour appliquer des modifications, il faut créer une nouvelle instance de l'objet.

5. Combinaison des approches

On peut combiner différentes approches de style binding :

@Component({
  template: `
    <div [style]="baseStyles"
         [style.color]="textColor"
         [style.font-size.px]="fontSize">
      {{ user.name }}
    </div>
  `
})

BONNES PRATIQUES

• Utilisez la liaison simple ([style.propriété]) pour les styles dynamiques isolés
• Préférez l'approche objet pour gérer plusieurs styles dynamiques
• Gardez les styles statiques dans vos fichiers CSS
• Utilisez des variables CSS (custom properties) pour une meilleure maintenabilité

PRÉCAUTION

En cas de conflit entre plusieurs bindings de style sur la même propriété, Angular applique des règles de précédence pour déterminer quel style sera appliqué.