サンプルコードで身につける: クラスとスタイルのバインディング

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1条件でクラスを付け外しする

[class.active] の最小例で、isActive が true のときだけ active クラスが付きます。見た目のルールはCSSに、付け外しの条件はテンプレートに、という分担がこの1行に詰まっています。ナビゲーションの「現在地」の強調表示などで毎日使う形です。

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

@Component({
  selector: 'app-menu-item',
  // isActive が true のときだけ active クラスが付く
  template: '<a [class.active]="isActive">ホーム</a>',
  styles: ['.active { font-weight: bold; color: royalblue; }'],
})
export class MenuItemComponent {
  isActive = true;
}

2スタイルに値を直接バインドする

[style.color] を使うと、CSSのプロパティ1つに式の結果を直接流し込めます。条件式をバインドすれば「30度以上なら赤、未満なら青」のような切り替えもテンプレートだけで書けます。気温・残量・スコアなど、値の大小で色を変えたい場面で活躍します。

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

@Component({
  selector: 'app-temperature',
  // 式の結果が color スタイルにそのまま設定される
  template:
    '<p [style.color]="temp >= 30 ? \'crimson\' : \'steelblue\'">' +
    '現在 {{ temp }} ℃</p>',
})
export class TemperatureComponent {
  temp = 35;
}

3複数のクラスを条件ごとに切り替える

[class.xxx] は1つの要素にいくつでも並べられ、それぞれが独立した条件で付け外しされます。「選択中」と「無効」のように直交する状態を別々のクラスで表すのがポイントです。タブUIやボタンの状態表現で頻出するパターンです。

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

@Component({
  selector: 'app-tab',
  // 条件ごとに [class.xxx] を並べる素直な書き方で十分
  template:
    '<button [class.selected]="isSelected" [class.disabled]="isDisabled">' +
    '注文履歴</button>',
  styles: [
    '.selected { border-bottom: 2px solid royalblue; }',
    '.disabled { opacity: 0.5; }',
  ],
})
export class TabComponent {
  isSelected = true;
  isDisabled = false;
}

4単位付きスタイルで進捗バーを作る

[style.width.%] のように単位を付けると、数値をそのままバインドしてもAngularが「60%」の形に変換してくれます。数値データを見た目の長さに変換する場面の定番です。アップロードの進捗、達成率、評価ゲージなどはこの仕組みで作られています。

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

@Component({
  selector: 'app-progress-bar',
  // .% を付けると数値が「60%」の形に変換されてバインドされる
  template:
    '<div class="bar"><div class="fill" [style.width.%]="percent"></div></div>' +
    '<p>{{ percent }} % 完了</p>',
  styles: [
    '.bar { background: #eee; height: 8px; }',
    '.fill { background: seagreen; height: 8px; }',
  ],
})
export class ProgressBarComponent {
  percent = 60;
}

5在庫状態で商品行の見た目を変える

「在庫切れなら打ち消し線、残りわずかならオレンジで強調」という、ECサイトの商品一覧そのままの実務例です。状態を表す複数の条件付きクラスを1つの要素で組み合わせています。データの状態と見た目の対応をテンプレートで宣言的に書けるのがこの仕組みの強みです。

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

@Component({
  selector: 'app-stock-row',
  // 在庫数という1つのデータから、複数の見た目の状態を導く
  template:
    '<p [class.sold-out]="stock === 0"' +
    '   [class.low-stock]="stock > 0 && stock <= 3">' +
    '{{ itemName }}(残り {{ stock }} 個)</p>',
  styles: [
    '.sold-out { text-decoration: line-through; color: gray; }',
    '.low-stock { color: darkorange; font-weight: bold; }',
  ],
})
export class StockRowComponent {
  itemName = '限定タンブラー';
  stock = 2;
}