CSS stilu piesaiste Angular

Angular arī var tieši pievienot stilus blokam. Tas tiek darīts ar elementa atribūta palīdzību, kas rakstīts sekojošā formātā:

[style.styleProperty]="property value"

Šajā gadījumā CSS īpašību nosaukumi, kuriem ir defīts iekšpusē, mūsu gadījumā tiks rakstīti camelCase. Apskatīsim piemēros, kā tas strādā.

Piemērs

Iestatīsim elementa fonu:

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

Pieņemsim, ka mums ir kāda īpašība, kas satur fona krāsu:

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

Pielietosim šo īpašību kā vērtību stilam:

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

Pieņemsim, ka mums ir kāda Būla īpašība:

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

Piesaistīsim dažādas CSS vērtības īpašībai atkarībā no Būla īpašības satura. Izmantosim tam ternāro operatoru:

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

Dots bloks. Izdariet tā, lai pirmais klikšķis uz bloka to nokrāso sarkanā krāsā, bet otrais klikšķis - zaļā krāsā.

Dots bloks. Dota poga. Izdariet tā, lai pogas nospiešana dubultotu bloka platumu.