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