CSS стильдерін Angular-да байлау

Angular-да блокқа тікелей стильдер қосуға болады. Бұл тег атрибуты арқылы жасалады, ол келесі форматта жазылады:

[style.стильдікҚасиет]="қасиет мәні"

Бұл жағдайда ішінде сызықшасы бар CSS қасиет атаулары біздің жағдайда camelCase-те жазылады. Мысалдар арқылы қарап көрейік, бұл қалай жұмыс істейді.

Мысал

Элементке фон берейік:

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

Бізде фон түсін қамтитын қандай да бір қасиет бар делік:

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

Осы қасиетті стиль үшін мән ретінде қолданайық:

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

Бізде қандай да бір буль қасиеті бар делік:

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

Буль қасиетінің мазмұнына байланысты әртүрлі CSS мәндерін байланыстырайық. Ол үшін тернарлы операторды қолданайық:

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

Блок берілген. Блокты бірінші рет басқанда қызыл түске, ал екінші рет басқанда жасыл түске бояйтын етіп жасаңыз.

Блок берілген. Түйме берілген. Түймені басқан кезде блоктың ені екі есеге ұлғайтылатын етіп жасаңыз.