Врзување на 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>

Практични задачи

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

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