Angular TIPS

Angular TIPS

要素のスタイルプロパティを操作するには?(Style Binding)

2017年10月12日

「[style.スタイルプロパティ名] = "式"」というバインディング構文により、要素に対する任意のCSSスタイルプロパティに値をバインドできるStyle Bindingの、基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 4以降。v4時点で執筆しました。

 Style Bindingは、style属性に特化したバインディング構文です。例えば以下は、ラジオボタンの選択に応じて、テキスト領域のスタイルを変更する例です。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <!--2ラジオボタンのクリックでbgcolorプロパティの値を設定-->
  <form>
    <label><input id="style1" name="style" type="radio"
      (click)="bgcolor=''" />ノーマル</label>
    <label><input id="style1" name="style" type="radio"
      (click)="bgcolor='#FF7F50'" />暖色</label>
    <label><input id="style1" name="style" type="radio"
      (click)="bgcolor='#00FFFF'" />寒色</label>
  </form>
  <!--1bgcolorプロパティの値に応じて背景色を変更-->
  <div [style.background-color]="bgcolor">
    要素のスタイルプロパティを操作するには、Style Bindingを使います。
  </div>
  `,
})
export class AppComponent  {
  bgcolor = '';
}
要素のスタイルを動的に変更するためのコード(app.component.ts)
ラジオボタンの選択を[暖色]から[寒色]に切り替えると……

ラジオボタンの選択を[暖色]から[寒色]に切り替えると……

選択に応じてテキスト領域の背景色を変化
選択に応じてテキスト領域の背景色を変化

 Style Bindingの基本的な構文は、以下の通りです。

[構文]Style Binding

[style.スタイルプロパティ名] = "式"

 「式」には、スタイルプロパティの値を表す式(プロパティなど)を指定します(1)。この例であれば、background-colorスタイルプロパティにコンポーネントのbgcolorプロパティを関連付けており、bgcolorプロパティはラジオボタンのクリック*1によって変更するようにしています(2)。よって、結果として、ラジオボタンの切り替えによってテキスト領域の背景色を変化することになります。

複数のスタイルを指定する

 Style Bindingの構文を列記することで、複数のスタイルを設定することも可能です。例えば以下は、先ほどの例を修正して、ラジオボタンの切り替えによってテキスト色も変更するようにしたものです。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <!--ラジオボタンのクリックでbgcolor/colorプロパティの値を設定-->
  <form>
    <label><input id="style1" name="style" type="radio"
      (click)="bgcolor=''; color='#000'" />ノーマル</label>
    <label><input id="style1" name="style" type="radio"
      (click)="bgcolor='#FF7F50'; color='#FFFFFF'" />暖色</label>
    <label><input id="style1" name="style" type="radio"
      (click)="bgcolor='#00FFFF'; color='#FF0000'"/>寒色</label>
  </form>
  <!--bgcolor/colorプロパティの値に応じてスタイルを変更-->
  <div [style.background-color]="bgcolor" [style.color]="color">
    要素のスタイルプロパティを操作するには、Style Bindingを使います。
  </div>
  `,
})
export class AppComponent  { 
  bgcolor = '';
  color = '#000';
}
要素のスタイルを動的に変更するためのコード(app.component.ts)
ラジオボタンの選択を[暖色]から[寒色]に切り替えると……

ラジオボタンの選択を[暖色]から[寒色]に切り替えると……

選択に応じてテキスト領域のスタイルを変化
選択に応じてテキスト領域のスタイルを変化

 ただし、複数のスタイルを設定するならば、Style BindingよりもngStyleディレクティブを利用した方がスマートです。ngStyleディレクティブを利用する方法については、後日「複数のスタイルプロパティを操作するには?」で解説の予定です。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:Style Binding(スタイルバインディング) カテゴリ:テンプレート構文(Template Syntax)
処理対象:バインディング構文(Binding Syntax) カテゴリ:テンプレート構文(Template Syntax)
処理対象:[style.スタイルプロパティ名] = "式" カテゴリ:テンプレート構文(Template Syntax) > バインディング構文(Binding Syntax)

※以下では、本稿の前後を合わせて5回分(第21回~第25回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

21. 数値(単数/複数)によって表示を切り替えるには?(i18nPlural)

Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。

22. 数値をパーセント形式に整形するには?(percent)

Angularで数値を%(パーセント)形式のテキスト表示に整形するための、percentパイプの基本的な使い方を説明する。

23. 数値を通貨記号付きの値に整形するには?(currency)

Angularで数値を通貨記号付きのテキスト表示に整形するための、currencyパイプの基本的な使い方を説明する。

24. 【現在、表示中】≫ 要素のスタイルプロパティを操作するには?(Style Binding)

「[style.スタイルプロパティ名] = "式"」というバインディング構文により、要素に対する任意のCSSスタイルプロパティに値をバインドできるStyle Bindingの、基本的な使い方を説明する。

25. スタイルプロパティに単位付きの値を設定するには?(Style Binding)

Style Bindingの「[style.スタイルプロパティ名.単位] = "式"」というバインディング構文によって、要素に対する任意のCSSスタイルプロパティに単位付きで値をバインドする方法を説明する。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!