Angular'да CSS стилдерин байлоо

Angular'да ошондой эле түздөн-түз блокуга стилдерди кошууга болот. Муну тегдин атрибуту жардамы менен аткарууга болот, ал төмөнкү форматта жазылат:

[style.styleProperty]="property value"

Бул учурда ичинде сызыкча бар CSS касиеттеринин аталыштары camelCase менен жазылат. Келгиле, бул кантип иштешин мисалдар аркылуу карап чыгалы.

Мисал

Элементке фон коёлу:

<div [style.backgroundColor]="'blue'">
	текст
</div>

Алалы, бизде фон түсүн камтыган белгилүү бир касиет бар:

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

Бул касиетти стилдин мааниси катары колдонолу:

<div [style.backgroundColor]="value">
	текст
</div>

Алалы, бизде белгилүү бир булеан касиети бар:

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

Булеан касиетинин мазмунуна жараша ар кандай CSS маанилерин байланыштыралы. Бул үчүн үч мүчөлүү операторду колдонолу:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	текст
</div>

Блок берилген. Блокту биринчи чыкылдатуу кызыл түскө, экинчи чыкылдатуу жашыл түскө боёшун кылыңыз.

Блок берилген. Кнопка берилген. Кнопканы басуу блоктун туурасын эки эсе көбөйтүшүн кылыңыз.