Angular
Style Bindings

Combinaison des Approches

Et comme toujours avec Angular, on peut tout combiner ! Vous pouvez appliquer un objet de base via [style]="obj", tout en forçant certaines propriétés individuelles via [style.prop]="..." sur le même élément.

La Formule Ultime (CSS)

Regardez comment ces différentes syntaxes cohabitent parfaitement sur une seule balise <div>. Les liaisons individuelles ([style.xxx]) écrasent toujours les valeurs globales du même nom.

<div
  class="ma-boite"                  // 1. Classes normales
  [style]="baseStyles"              // 2. L'Objet CSS de base
  [style.color]="textColor"       // 3. Propriété individuelle
  [style.fontSize.px]="fontSize"  // 4. Propriété avec unité !
>...</div>

Démonstration Interactive

Modifiez la couleur du texte et sa taille. Ces deux éléments gèrent leur CSS de manière indépendante tout en conservant les styles de l'objet de base !

Panneau de contrôle
#0d6efd
24
// État des variables TypeScript :

textColor = "#0d6efd"
fontSize = 24

John Doe

Le Code Source

combinaison-styles.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <!-- L'attribut magique avec toutes les combinaisons CSS ! -->
    <div [style]="baseStyles"
         [style.color]="textColor"
         [style.fontSize.px]="fontSize">
      {{ user.name }}
    </div>

    <input type="color" [(ngModel)]="textColor">
    <input type="range" [(ngModel)]="fontSize" min="12" max="64">
  `
})
export class CombinationStyleComponent {
  user = { name: 'John Doe' };

  // L'objet CSS de base
  baseStyles = {
    display: 'inline-block',
    backgroundColor: '#ffffff',
    padding: '32px 48px',
    borderRadius: '16px'
  };

  // Les variables individuelles
  textColor = '#0d6efd'; // Bleu par défaut
  fontSize = 24; // Taille en px
}