AngularでのCSSスタイルバインディング

Angularでは、ブロックに直接スタイルを追加することも可能です。これは、以下の形式で記述されたタグの属性を使用して行われます：

[style.styleProperty]="property value"

この場合、内部にハイフンを持つCSSプロパティ名は、キャメルケースで記述されます。どのように機能するか、例を見てみましょう。

例

要素に背景を設定します：

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

ブロックが与えられています。ブロックを最初にクリックすると赤色に、2回目にクリックすると緑色に塗りつぶすようにしてください。

ブロックとボタンが与えられています。ボタンを押すとブロックの幅が2倍になるようにしてください。