Прывязка 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>

Практычныя задачы

Даны блок. Зрабіце так, каб першы клік па блоку фарбаваў яго ў чырвоны колер, а другі клік - у зялёны.

Даны блок. Дана кнопка. Зрабіце так, каб націсканне на кнопку павялічвала шырыню блока ў два разы.