Везивање CSS стилова у Angular

У Angular такође можете директно додавати стилове за блок. То се ради уз помоћ атрибута тага, написаног у следећем формату:

[style.styleProperty]="property value"

При томе имена 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>

Дат је блок. Начините тако да први клик на блок обоји у црвену боју, а други клик - у зелену.

Дат је блок. Дато је дугме. Начините тако да притисак на дугме повећа ширину блока два пута.