Angular
Style Bindings

Liaison via un Objet

Plutôt que d'écrire une longue chaîne de caractères CSS (difficile à maintenir), Angular vous permet de passer directement un Objet JSON à l'attribut [style] ou [ngStyle]. C'est plus propre et beaucoup plus lisible !

La Formule

On utilise l'attribut [style] et on lui donne un Objet. Attention : en JavaScript, les propriétés CSS avec des tirets (ex: background-color) doivent être écrites en camelCase (ex: backgroundColor) ou mises entre guillemets.

[style]="{
  display: 'flex',
  backgroundColor: maVariableCouleur
}"

Démonstration Interactive

Changez la couleur via le sélecteur. Observez comment seul la propriété backgroundColor de notre objet TypeScript est mise à jour.

Panneau de contrôle
#f0afca
// Objet TypeScript actuel
userStyles = {
  "display": "flex",
  "padding": "24px",
  "backgroundColor": "#f0afca"
}

John Doe

Stylisé par un Objet JSON

Le Code Source

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

@Component({
  selector: 'app-user',
  template: `
    <!-- L'attribut [style] reçoit directement l'objet JSON -->
    <div [style]="userStyles">
      {{ user.name }}
    </div>

    <!-- L'événement (ngModelChange) s'active quand on choisit une couleur -->
    <input type="color" [(ngModel)]="bgColor" (ngModelChange)="updateBackgroundColor()">
  `
})
export class UserComponent {
  user = { name: 'John Doe' };
  bgColor = '#f0afca'; 

  // Définition de l'objet contenant les propriétés CSS
  userStyles = {
    display: 'flex',
    padding: '24px',
    backgroundColor: this.bgColor
  };

  updateBackgroundColor() {
    // On recrée l'objet en modifiant uniquement la couleur
    this.userStyles = {
      ...this.userStyles, 
      backgroundColor: this.bgColor
    };
  }
}