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

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

html[style.styleProperty]="property value"

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

例

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

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

例

背景色を含むプロパティがあるとします：

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

このプロパティをスタイルの値として適用します：

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

例

ブール値プロパティがあるとします：

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

ブール値プロパティの内容に応じて、CSSプロパティに異なる値をバインディングします。これには三項演算子を使用します：

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

実践的な課題