← Angular コース
31. 属性ディレクティブ — ngClass と ngStyle
属性ディレクティブは、要素の見た目や振る舞いを後付けで変える仕組みです。ngClass は条件に応じて複数のCSSクラスをまとめて付け外しでき、[ngClass]="{ active: isActive, error: hasError }" のようにオブジェクトで「クラス名: 付けるか」を渡します。ngStyle も同様に [ngStyle]="{ color: textColor }" でスタイルをまとめて指定できます。
実務では、状態によって複数のクラスを同時に切り替えたいときに ngClass が便利です。クラスが1つだけなら以前学んだ [class.xxx]、複数をまとめて扱うなら ngClass、と使い分けると読みやすくなります。属性ディレクティブはホスト要素(付けた要素自身)に作用するのが特徴です。
使うには CommonModule を imports に追加する必要があります。注意点として、ngStyle で値を組み立てるロジックが複雑になりがちなので、付けるかどうかの条件はクラス側のプロパティやcomputedに切り出し、テンプレートには結果だけを渡すと見通しがよくなります。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-status-badge',
imports: [CommonModule],
// ngClass はオブジェクトで「クラス名: 付けるか」を渡す
template:
'<span [ngClass]="{ active: isActive, disabled: !isActive }"' +
' [ngStyle]="{ color: textColor }">' +
' 状態ラベル' +
'</span>',
styles: ['.active { font-weight: bold; } .disabled { opacity: 0.5; }'],
})
export class StatusBadgeComponent {
isActive = true;
textColor = 'teal';
}