Angular
Style Bindings

Liaison multiple via Chaîne

Si vous avez plusieurs règles CSS statiques ou semi-statiques à appliquer, vous pouvez passer une chaîne de caractères complète à l'attribut [style], comme vous le feriez en HTML pur.

La Formule

On utilise l'attribut [style] (sans spécifier de propriété précise) et on lui passe une phrase complète de CSS (avec ses points-virgules) :

[style]="maChaineCSS"

Démonstration Interactive

La variable contient une longue phrase CSS. Changez la couleur de fond via le sélecteur, et observez la phrase TypeScript se mettre à jour pour impacter la carte.

Panneau de contrôle
#f0f4f8
// Getter qui génère la phrase
userCardStyles() {
  return "padding: 24px; background-color: #f0f4f8; border-radius: 16px;"
}

John Doe

Style Binding dynamique

Le Code Source

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

@Component({
  selector: 'app-user',
  template: `
    <!-- L'attribut [style] injecte toute la phrase CSS générée par le getter -->
    <div [style]="userCardStyles">
      {{ user.name }}
    </div>

    <input type="color" [(ngModel)]="bgColor">
  `
})
export class UserComponent {
  user = { name: 'John Doe' };
  bgColor = '#f5f5f5';

  // Un getter est une méthode agissant comme une variable.
  // Elle est recalculée automatiquement à chaque fois que bgColor change.
  get userCardStyles() {
    return `padding: 24px; background-color: ` + this.bgColor + `; border-radius: 16px;`;
  }
}