AngularでのCSSクラス一括バインディング

ディレクティブ ngClass を使用すると、タグ内のCSSクラスのセットを一度に有効または無効にすることができます。このディレクティブは、キーをクラス名、値をブール値とするオブジェクトを値として受け取ります。クラスは、その値が true に設定されている場合は有効になり、 false の場合は無効になります。

実際に見てみましょう。以下のクラスがあるとします：

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

例を通して、これらのクラスをブロックに対して有効または無効にする方法を見てみましょう。

例

1つのクラスを有効にし、もう1つを無効にします：

<div [ngClass]="{blue: true, bold: false}">
	text
</div>

例

クラスの状態がクラスのプロパティに格納されているとします：

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

クラスの可視性を、私たちのプロパティの値に応じてバインドしましょう：

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

例

プロパティには、クラスとその状態を持つオブジェクト全体を格納することができます：

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

このオブジェクトをブロックにバインドしましょう：

<div [ngClass]="styles">
	text
</div>

例

オブジェクトの値をクラスの他のプロパティから取得することもできます：

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

このオブジェクトをブロックにバインドしましょう：

<div [ngClass]="styles">
	text
</div>

実践タスク

2つのCSSクラスを作成してください。 1つはブロックの背景を定義し、もう1つはフォントサイズを定義するようにします。

2つのボタンを作成してください。最初のボタンをクリックすると最初のクラスがトグル（切り替わり）、2番目のボタンをクリックすると 2番目のクラスがトグルするようにします。