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

Angularでは、ブロックへのCSSクラスの適用をオン/オフできます。これは、次の形式で記述されたタグの属性を使用して行われます：

[class.クラス名]="true または false"

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

これらのクラスをブロックに対してオン・オフする方法の例を見ていきましょう。

例

1つのクラスをオンにし、もう1つをオフにします：

<div [class.blue]="true" [class.bold]="false">
	text
</div>

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

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

プロパティの値に応じてクラスの表示をバインドします：

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

以下のCSSクラスがあるとします：

.hidden {
	visibility: hidden;
}

このクラスをブロックにバインドしてください。クリックするとブロックが表示または非表示になるボタンを作成してください。