Angular TIPS
複数のスタイルプロパティをまとめて操作するには？（ngStyle）
ngStyleディレクティブを使って、要素に対して複数のスタイルプロパティをまとめて設定する方法を説明する。
【対応バージョン】 Angular 5以降。v5時点で執筆しました。
Angularアプリで要素のスタイルを操作するのに最もシンプルな方法は、Style Bindingを利用することです。ただし、Style Bindingで一度に設定できるのは、スタイルプロパティひとつだけです。複数のスタイルプロパティを設定するには、Style Binding構文を列記しなければなりません*1。
- *1 具体的なコードは別稿「TIPS：要素のスタイルプロパティを操作するには？」を参照してください。
もっとも、一般的にこれは冗長なので、複数のスタイルプロパティをまとめて設定したい場合には、ngStyleディレクティブを利用すべきです。
具体的な例も見てみましょう。以下のサンプルでは、ngStyleディレクティブを利用して、<div>要素に枠線や背景色、フォントサイズなどを付与しています。
|
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div [ngStyle]="style">
複数のスタイルプロパティをまとめて設定したい場合には、ngStyleディレクティブを利用すべきです。<br />
サンプルでは、ngStyleディレクティブを利用して、<div>要素に枠線や背景色、フォントサイズなどを付与しています。
</div>
`,
})
export class AppComponent {
style = {
border: 'solid 1px #000',
width: '400px',
color: '#f00',
// 1camelCase形式の表記に
backgroundColor: '#ffc',
// 2単位付きのスタイルプロパティ
fontSize: '150%'
}
}
|
ngStyleディレクティブの構文は、以下の通りです。
［構文］ngStyleディレクティブ
<element [ngStyle]="styles">...</element>
- element： 任意の要素
- styles： スタイル情報（「プロパティ名: 値」のハッシュ）
background-colorのようにハイフン含みのスタイルプロパティを指定する際には、「backgroundColor」のようにcamelCase形式の表記に置き換えます（1）。JavaScript（TypeScript）のプロパティ名にはハイフンを利用できないためです。
もしくは、以下のようにプロパティ名全体をクォートでくくってしまえば、ハイフンでの表記も可能です。
|
style = {
'border': 'solid 1px #000',
'width': '400px',
'color': '#f00',
'background-color': '#ffc',
'font-size': '150%'
}
|
単位付きのプロパティも表現できる
Style Bindingの場合と同じく、「プロパティ名.単位」の形式で単位付きの値を表記することもできます*1。2であれば、以下のように表しても同じ意味です。
- *1 Style Bindingでの例については、別稿「TIPS：スタイルプロパティに単位付きの値を設定するには？」も参照してください。
|
export class AppComponent {
style = {
……中略……
'font-size.%': '150'
}
}
|
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＞要素を使って、入力の有無を判定したり、サブミット済みかを判定したりと、その状態を監視する方法を説明する。
