Liaison des styles CSS dans Angular

Dans Angular, il est également possible d'ajouter directement des styles à un bloc. Cela se fait à l'aide d'un attribut de balise, écrit dans le format suivant :

html[style.propriétéStyle]="valeur de la propriété"

Dans ce cas, les noms des propriétés CSS qui contiennent un trait d'union à l'intérieur seront écrits en camelCase dans notre cas. Regardons des exemples pour voir comment cela fonctionne.

Exemple

Définissons l'arrière-plan d'un élément :

app/app.component.html<div [style.backgroundColor]="'blue'">
  text
</div>

Exemple

Supposons que nous ayons une propriété contenant une couleur d'arrière-plan :

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

Appliquons cette propriété comme valeur pour le style :

app/app.component.html<div [style.backgroundColor]="value">
  text
</div>

Exemple

Supposons que nous ayons une propriété booléenne :

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

Nous lierons différentes valeurs à la propriété CSS en fonction du contenu de la propriété booléenne. Utilisons pour cela l'opérateur ternaire :

app/app.component.html<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
  text
</div>

Tâches pratiques