CSSクラスをAngular2テンプレートの要素にバインドするのは簡単です。 テンプレートの角かっこで囲まれたclass.classNameでクラス名を指定し、次に、クラスを適用するかどうかを決定するためにtrueまたはfalseと評価される右側の式を指定します。 たとえば、単一のクラスをバインドする方法は次のとおりです。

<div [class.active]="isActive">
  ...
</div>

複数のクラスのNgClass

複数のクラスを追加する可能性がある場合は、NgClassディレクティブが非常に便利です。 NgClassは、キーとしてクラス名を持ち、値としてtrueまたはfalseと評価される式を持つオブジェクトを受け取る必要があります。

<div [ngClass]="myClasses">
  ...
</div>

そして、myClassesは、次のようなオブジェクトを含むコンポーネントのプロパティになります。

myClasses = {
  important: this.isImportant,
  inactive: !this.isActive,
  saved: this.isSaved,
  long: this.name.length > 6
}

もちろん、オブジェクトはメソッドの戻り値にすることもできます。

<div [ngClass]="setMyClasses()">
  ...
</div>

関連するコンポーネントクラス内

setMyClasses() {
  let classes = {
    important: this.isImportant,
    inactive: !this.isActive,
    saved: this.isSaved,
    long: this.name.length > 6
  };
  return classes;
}

関連項目