Angular2のクラスバインディングとNgClass
提供:Dev Guides
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; }