Angular TIPS

Angular TIPS

複数のスタイルプロパティをまとめて操作するには?(ngStyle)

2017年12月25日

ngStyleディレクティブを使って、要素に対して複数のスタイルプロパティをまとめて設定する方法を説明する。

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

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

 Angularアプリで要素のスタイルを操作するのに最もシンプルな方法は、Style Bindingを利用することです。ただし、Style Bindingで一度に設定できるのは、スタイルプロパティひとつだけです。複数のスタイルプロパティを設定するには、Style Binding構文を列記しなければなりません*1

 もっとも、一般的にこれは冗長なので、複数のスタイルプロパティをまとめて設定したい場合には、ngStyleディレクティブを利用すべきです。

 具体的な例も見てみましょう。以下のサンプルでは、ngStyleディレクティブを利用して、<div>要素に枠線や背景色、フォントサイズなどを付与しています。

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

@Component({
  selector: 'app-root',
  template: `
  <div [ngStyle]="style">
  複数のスタイルプロパティをまとめて設定したい場合には、ngStyleディレクティブを利用すべきです<br />
  サンプルでは、ngStyleディレクティブを利用して&lt;div&gt;要素に枠線や背景色、フォントサイズなどを付与しています。
  </div>
  `,  
})
export class AppComponent {
  style = {
    border: 'solid 1px #000',
    width: '400px',
    color: '#f00',
    // 1camelCase形式の表記に
    backgroundColor: '#ffc',
    // 2単位付きのスタイルプロパティ
    fontSize: '150%'
  }
}
複数のスタイルプロパティを設定するコード(app.component.ts)
複数のスタイルを適用
複数のスタイルを適用

 ngStyleディレクティブの構文は、以下の通りです。

[構文]ngStyleディレクティブ

<element [ngStyle]="styles">...</element>

  • element: 任意の要素
  • styles: スタイル情報(「プロパティ名: 値」のハッシュ)

 background-colorのようにハイフン含みのスタイルプロパティを指定する際には、「backgroundColor」のようにcamelCase形式の表記に置き換えます(1)。JavaScript(TypeScript)のプロパティ名にはハイフンを利用できないためです。

 もしくは、以下のようにプロパティ名全体をクォートでくくってしまえば、ハイフンでの表記も可能です。

TypeScript
style = {
  'border': 'solid 1px #000',
  'width': '400px',
  'color': '#f00',
  'background-color': '#ffc',
  'font-size': '150%'
}
プロパティをクォートでくくった例

単位付きのプロパティも表現できる

 Style Bindingの場合と同じく、「プロパティ名.単位」の形式で単位付きの値を表記することもできます*12であれば、以下のように表しても同じ意味です。

TypeScript
export class AppComponent {
  style = {
    ……中略……
    'font-size.%': '150'
  }
}
単位付きのスタイルプロパティを設定する例(2の書き替え)
処理対象:ディレクティブ(Directive) カテゴリ:基本
API:NgStyle(ngStyle) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)

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

33. 複数のスタイルクラスをまとめて操作するには?(ngClass)

スタイルシートとして定義した複数の対象クラスのスタイルを、任意の要素のclass属性にまとめて着脱できるngClassディレクティブの基本的な使い方を説明する。

34. コンポーネントにスタイルシートを適用するには?(styles/StyleUrlsパラメーター)

@Componentデコレーターのstylesパラメーターを利用してコンポーネントにスタイルシートを適用する基本的な方法を解説。また、スタイルを外部ファイルにする方法も説明する。

35. 【現在、表示中】≫ 複数のスタイルプロパティをまとめて操作するには?(ngStyle)

ngStyleディレクティブを使って、要素に対して複数のスタイルプロパティをまとめて設定する方法を説明する。

36. 入力フォームに検証機能を実装するには?(form/input)

Angularにより拡張されている標準的な<form>/<input>要素を使って、検証機能付きの入力フォームを実装する方法を説明する。

37. フォームの状態を監視するには?(ngForm/ngModel)

Angularにより拡張されている標準的な<form>/<input>要素を使って、入力の有無を判定したり、サブミット済みかを判定したりと、その状態を監視する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!