Angular TIPS

Angular TIPS

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

2017年10月16日

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

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

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

 Style Bindingでは、単位付きの値を設定するための構文も用意されています。

[構文]Style Binding(単位付き)

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

 例えば以下は、ラジオボタンの選択に応じて、テキスト領域のスタイルを変更する例です。

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

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

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

選択に応じてテキストのサイズを変化
選択に応じてテキストのサイズを変化

 もちろん、以下のように、単位付きの値をそのまま渡すことも可能です。

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

@Component({
  selector: 'my-app',
  template: `
  <form>
    <label><input id="style1" name="style" type="radio"
      (click)="size='150%'" /></label>
    <label><input id="style1" name="style" type="radio"
      (click)="size='100%'" /></label>
    <label><input id="style1" name="style" type="radio"
      (click)="size='50%'" /></label>
  </form>
  <!--1bgcolorプロパティの値に応じて背景色を変更-->
  <div [style.font-size]="size">
    要素のスタイルプロパティを操作するには...
  </div>
  `,
})
export class AppComponent  { 
  size = 100;
}
単位付き構文を使わなかった場合のコード

 しかし、その場合は、値は文字列として操作しなければなりません。このような単純なコードではさほど問題にもなりませんが、演算を伴う場合には単位なしの数値が扱いやすいのは言うまでもありません。単位を伴うスタイルプロパティには、本稿の構文を積極的に利用することをお勧めします。

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

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

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

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

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

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

25. 【現在、表示中】≫ スタイルプロパティに単位付きの値を設定するには?(Style Binding)

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

26. インラインフレームに外部リソースをバインドするには?(Property Binding)

セキュリティの観点からデフォルトではiframeのsrc属性やobjectのdata属性にはプロパティバインディングできない。これを回避して信頼できる値としてバインディングする方法を説明する。

27. 要素に適用するスタイルクラスを操作するには?(Class Binding)

スタイルシートとして定義した対象クラスのスタイルを、任意の要素のclass属性に簡単に着脱できるClass Bindingの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!