Angular TIPS

Angular TIPS

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

2017年12月12日

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

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

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

 別稿「TIPS:要素に適用するスタイルクラスを操作するには?」では、Class Binding構文を利用することで、スタイルクラスを着脱する方法について解説しました。ただし、Class Bindingでは一度に1つのスタイルクラスしか操作できないという制限があります。Class Binding構文を複数列記することも可能ですが、そのような場合にはngClassディレクティブを利用することをお勧めします。

 ngClassはClass Bindingのディレクティブ版で、複数のスタイルクラスをまとめて操作できる点が異なります。

 さっそく、具体的な例も見てみましょう。以下は、チェックボックスのオン/オフに応じて、テキスト領域のスタイルを変更する例です。

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

@Component({
  selector: 'app-root',
  template: `
  <form>
    <label for="switch">背景色:</label>
    <!-- 3チェックのオン/オフでstyles配下のプロパティを反転 -->
    <input id="switch" name="switch" type="checkbox"
      (change)="styles.light=!styles.light" />
      <br />
      <label for="switch2">文字サイズ:</label>
      <input id="switch2" name="switch2" type="checkbox"
      (change)="styles.big=!styles.big" />
  </form>
  <!-- 2stylesプロパティをngClassディレクティブにバインド -->
  <div id="panel" [ngClass]="styles">
  <p>Class Bindingでは一度にひとつのスタイルクラスしか操作できないという制限がありますClass Binding構文を複数列記することも可能ですが、そのような場合にはngClassディレクティブを利用することをお勧めします<br />
  ngClassはClass Bindingのディレクティブ版で、複数のスタイルクラスをまとめて操作できる点が異なります。</p>
  </div>
  `,
  styles: [`
    .box {
      border:solid 1px #000;
      width: 400px;
      padding: 10px;
    }
    
    .light {
      color: #f00;
      background-color: #ffc;
    }

    .big {
      font-size: 150%;
      line-height: 150%;
    }
  `]
})
export class AppComponent  {
  // 1stylesプロパティを定義
  styles = {
    box: true,
    light : false,
    big : false
  };
}
複数のスタイルクラスを操作するためのコード(app.component.ts)*1
[背景色]チェックボックスをオンにした状態

[背景色]チェックボックスをオンにした状態

[文字サイズ]チェックボックスをオンにした状態

[文字サイズ]チェックボックスをオンにした状態

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

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

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

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

  • element: 任意の要素
  • classes: スタイル情報(「スタイルクラス名: 有効/無効」のハッシュ)

 この例であれば、スタイルクラスのオン/オフ情報をstylesプロパティとして準備し(1)、これをngClassディレクティブにバインドしています(2)。stylesプロパティのそれぞれのキー(lightbig)は、チェックボックスのchangeイベントによって反転するようになっていますので(3)、結果、チェックボックスのオン/オフによってスタイルクラスが適用/解除されるようになります。

ngClassディレクティブのさまざまな設定方法

 ngClassディレクティブには、「クラス名: 値」形式のハッシュの他、以下のような形式の値を渡すことができます。

(1)文字列

 スタイルクラスを空白区切りで列挙します。以下は、boxlightbigスタイルクラスをngClassディレクティブ経由で指定する例です。

HTML
<div id="panel" [ngClass]="'box light big'">
ngClassディレクティブに文字列を渡す例

 [...]はProperty Binding構文なので、値もJavaScript(TypeScript)の文字列リテラルとして――クォートで囲まなければならない点に注意してください。さもなくば、以下のように表しても同じ意味です。

HTML
<div id="panel" ngClass="box light big">
ngClassディレクティブに文字列を渡す例(2)

 Property Bindingを表す[...]が外れたので、属性値はそのまま(JavaScriptの式ではなく)文字列として解釈されるわけです*1

  • *1 もっとも、ここでは記法の確認のために、このような書き方をしただけで、固定の文字列を渡すだけならば、HTML標準のclass属性を使えば十分です。
(2)配列

 スタイルクラスを文字列配列として列挙します。(1)と同じく、boxlightbigスタイルクラスを配列形式で指定してみましょう。

HTML
<div id="panel" [ngClass]="['box', 'light', 'big']">
ngClassディレクティブに配列を渡す例
(3)ハッシュ(複数まとめ)

 ハッシュのキーとして、複数のスタイルクラスを空白区切りで列挙したものを渡すことで、複数のスタイルをまとめてオン/オフできます。例えば以下は、冒頭のサンプルを、lightbigスタイルをまとめてオン/オフできるように書き換えたものです。

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

@Component({
  selector: 'app-root',
  template: `
  <form>
    <label for="switch">適用/除外:</label>
    <input id="switch" name="switch" type="checkbox"
      (change)="flag=!flag" />
  </form>
  <div id="panel" [ngClass]="{'box light big': flag}">
  <p>Class Bindingでは……省略……</p>
  </div>
  `,
  ……中略……
})
export class AppComponent  { 
  flag = false;
}
スタイルクラスをまとめてオンオフする例
[適用/除外]チェックボックスをオフからオンに切り替えると……

[適用/除外]チェックボックスをオフからオンに切り替えると……

選択するとテキスト領域のスタイルがまとめて変化
選択するとテキスト領域のスタイルがまとめて変化
処理対象:ディレクティブ(Directive) カテゴリ:基本
API:NgClass(ngClass) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)

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

31. 条件式の真偽に応じて出力を切り替えるには?(ngIf/else)

与えられた条件式に基づき要素の表示/非表示を切り替えるngIfディレクティブで用いる、「さもなければ」を意味するelse句と、テンプレートとして別出しするためのthen句の、基本的な使い方を説明する。

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

Angularで数値によってテキスト表示内容を切り替えるための、ngPluralディレクティブの基本的な使い方を説明する。

33. 【現在、表示中】≫ 複数のスタイルクラスをまとめて操作するには?(ngClass)

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

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

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

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

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

サイトからのお知らせ

Twitterでつぶやこう!