CSS stílusok hozzárendelése az Angularban

Az Angularban közvetlenül is hozzáadhatunk stílusokat egy blokkhoz. Ez a következő formátumban írt címkeattribútum segítségével történik:

[style.styleProperty]="property value"

Azok a CSS tulajdonságnevek, amelyek kötőjelet tartalmaznak, esetünkben camelCase formában írandók. Nézzünk példákon, hogyan működik ez.

Példa

Állítsuk be egy elem háttérszínét:

<div [style.backgroundColor]="'blue'">
	text
</div>

Tegyük fel, hogy van egy olyan tulajdonságunk, amely a háttérszínt tartalmazza:

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

Alkalmazzuk ezt a tulajdonságot stílus értékként:

<div [style.backgroundColor]="value">
	text
</div>

Tegyük fel, hogy van egy logikai tulajdonságunk:

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

A logikai tulajdonság tartalmától függően különböző értékeket rendelünk a CSS tulajdonsághoz. Használjunk ehhez ternáris operátort:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

Adott egy blokk. Úgy kell elrendezni, hogy az első kattintás a blokkot pirosra, a második kattintás pedig zöldre színezze.

Adott egy blokk. Adott egy gomb. Úgy kell elrendezni, hogy a gomb megnyomása megduplázza a blokk szélességét.