Angular
Style Bindings

Liaison avec Unités

Plutôt que d'écrire du code complexe pour coller manuellement "px" ou "%" à la fin de vos variables, Angular propose un raccourci très élégant.

La Formule

On ajoute le suffixe de l'unité (comme .px, .em, .%) directement après le nom de la propriété :

[style.propriété.unité]="nombre"
Exemple :[style.height.px]="200" (Ici, la variable n'a besoin de contenir que le chiffre 200, Angular se charge d'ajouter les pixels).

Démonstration Interactive

Ajustez le curseur pour modifier la variable numérique. Le Style Binding s'occupe d'ajouter les pixels !

Panneau de contrôle
cardHeight = 200

200 px

Zone max (400px)

Le Code Source

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

@Component({
  selector: 'app-user',
  template: `
    <!-- L'attribut [style.height.px] attend juste un nombre -->
    <div [style.height.px]="cardHeight">
      La hauteur est de {{ cardHeight }} pixels
    </div>

    <!-- Contrôle Slider -->
    <input type="range" [(ngModel)]="cardHeight" min="100" max="400">
  `
})
export class SizeComponent {
  // La variable ne contient que le chiffre pur (pas de "px")
  cardHeight = 200; 
}