Angularда CSS стилларни боглаш

Angularда ҳам блок учун бевосита стиллар қўшиш мумкин. Бу тегинг атрибути ёрдамида амалга оширилади, у қуйидаги форматда ёзилади:

[style.styleProperty]="property value"

Бунда, ичида дефис бор бўлган CSS хоссаларининг номлари, бизнинг ҳолимизда camelCase да ёзилади. Кeling, бу қандай ишлашини мисолларда кўриб чиқайлик.

Мисол

Элементга фон белгилаймиз:

<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>

Амалий машқлар

Блок берилган. Блокка биринчи бор босилганда унинг ранги қизил, иккинчи бор босилганда яшил рангга бўёлишини таъминланг.

Блок берилган. Тугма берилган. Тугма босилганда блокнинг эни икки баробарга оширилишини таъминланг.