Angular
Style Bindings

Liaison d'une propriété CSS

Parfois, vous ne voulez pas créer et ajouter une classe entière, mais juste modifier une seule propriété CSS directement (comme la couleur, la taille, ou la visibilité). C'est le rôle du Style Binding.

La Formule Magique

Pour modifier un style CSS spécifique directement dans le HTML, on écrit son nom juste après le mot style. :

[style.propriété-css]="valeur"
Exemples :
  • [style.color]="'red'"(Le texte devient rouge)
  • [style.display]="isVisible ? 'block' : 'none'"(L'élément apparaît ou disparaît)

Démonstration Interactive

Ici, on utilise le Style Binding pour manipuler la propriété display. Cliquez sur le bouton pour cacher ou révéler le coffre-fort.

Message Secret

Bonjour John Doe, vous m'avez trouvé !

Le Code Source

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

@Component({
  selector: 'app-user',
  template: `
    <!-- La balise div disparaîtra physiquement (display: none) si isVisible est faux -->
    <div [style.display]="isVisible ? 'block' : 'none'">
      Message Secret de {{ user.name }}
    </div>

    <!-- Le bouton inverse la valeur de isVisible -->
    <button (click)="toggleVisibility()">
      {{ isVisible ? 'Masquer' : 'Afficher' }}
    </button>
  `
})
export class StyleBindingComponent {
  user = { name: 'John Doe' };
  
  // Par défaut, l'élément est visible
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}