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 :

[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 :

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

Exemple

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

export class AppComponent {
	public value: string = 'red';
}

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

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

Exemple

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

export 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 :

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

Tâches pratiques

Un bloc est donné. Faites en sorte qu'un premier clic sur le bloc le colore en rouge, et un deuxième clic le colore en vert.

Un bloc est donné. Un bouton est donné. Faites en sorte qu'un clic sur le bouton double la largeur du bloc.