Legarea stilurilor CSS în Angular

În Angular, de asemenea, se pot adăuga direct stiluri pentru un bloc. Acest lucru se face cu ajutorul unui atribut al tag-ului, scris în următorul format:

[style.styleProperty]="valoarea proprietății"

În acest caz, numele proprietăților CSS care conțin un liniuță în interior, în cazul nostru vor fi scrise în camelCase. Să vedem cu exemple cum funcționează acest lucru.

Exemplu

Să setăm fundalul unui element:

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

Exemplu

Să presupunem că avem o proprietate care conține culoarea de fundal:

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

Să aplicăm această proprietate ca valoare pentru stil:

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

Exemplu

Să presupunem că avem o proprietate booleană:

export class AppComponent {
	public isActive: boolean = true;
}

Vom lega diferite valori ale proprietății CSS în funcție de conținutul proprietății booleene. Vom folosi pentru aceasta operatorul ternar:

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

Sarcini practice

Este dat un bloc. Faceți ca primul click pe bloc să îl coloreze în roșu, iar al doilea click - în verde.

Este dat un bloc. Este dat un buton. Faceți ca apăsarea butonului să mărească lățimea blocului de două ori.