Angular-da CSS stillarynyň baglanyşyklandyrylmagy

Angular-da hem blok üçin göni stil goşup bolýar. Bu aşakdaky formatda ýazylan teg atributy arkaly amala aşyrylýar:

[style.styleProperty]="property value"

Şol bir wagtyň özünde, içinde defisi bolan CSS aýratynlyklarynyň atlary, bizim ýagdaýymyzda camelCase görnüşinde ýazylar. Geliň, munyň nähili işleýändigini mysallar bilen göreliň.

Mysal

Elemente fon bereliň:

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

Mysal

Geliň, bizde fon reňkini saklaýan käbir aýratynlyk bar bolsun:

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

Bu aýratynlygy stiliň bahasy hökmünde ulanyň:

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

Mysal

Geliň, bizde käbir boolean aýratynlyk bar bolsun:

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

Boolean aýratynlygyň mazmunyndan çykyş edip, CSS aýratynlyklaryna dürli bahalar baglanyşdyrarys. Bunun üçin ternary operator-y ulanyň:

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

Amaly wezipeler

Blok berlen. Birinji gezek bloka basylşyň ony gyzyl reňke, ikinji gezek basylşyň bolsa ýaşyl reňke öwürmek üçin işi ýerine ýetiriň.

Blok berlen. Düwme berlen. Düwmä basylşda blokyň iniň iki esse artmagyny üpjün ediň.