← Angular コース
5. クラスとスタイルのバインディング
CSSクラスの付け外しを条件で切り替えるには [class.クラス名]="条件" と書きます。条件が true のときだけそのクラスが付与されます。同じように [style.スタイル名]="値" で、個別のスタイルに値を直接バインドすることもできます。
実務では「選択中のタブに色を付ける」「在庫切れの商品に打ち消し線を引く」など、状態に応じた見た目の切り替えに毎日のように使います。見た目のルール自体はCSSに書いておき、テンプレートでは付け外しの条件だけを書く、という分担にすると読みやすくなります。
複数のクラスをまとめて切り替えたいときは、つい文字列を組み立てたくなりますが、まずは [class.xxx] を条件ごとに並べる素直な書き方で十分です。条件が増えて読みにくくなってから整理を考えましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
@Component({
selector: 'app-stock-label',
// 条件が true のときだけ sold-out クラスが付く
template:
'<p [class.sold-out]="stock === 0" [style.color]="labelColor">' +
'在庫: {{ stock }} 個</p>',
styles: ['.sold-out { text-decoration: line-through; }'],
})
export class StockLabelComponent {
stock = 0;
labelColor = 'crimson';
}