Angularでのスタイルの動的変更

ディレクティブ ngClass と ngStyle を使用して式を要素にバインドすることができ、それによってスタイルを動的に変更できます。

コンポーネントクラスのプロパティ active を使って、テキストを非表示または表示するようにしてみましょう：

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

そのためには、このプロパティを交互にオンまたはオフにする関数 toggle を記述します：

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

コンポーネントのCSSファイルで、クラスに次のスタイルを設定します：

.hidden {
	display: none;
}

コンポーネントのテンプレートでdivを作成し、 CSSクラス hidden を追加します。このクラスは、コンポーネントクラスのプロパティ active に応じてオンまたはオフになります：

<div [ngClass]="{hidden: active}">
	text
</div>

また、クリックするとメソッド toggle が呼び出され、コンポーネントの表示/非表示を切り替えるボタンも作成します：

<button (click)="toggle()">
	toggle
</button>

3つのブロックが与えられています。それぞれが対応するブロックの表示を切り替える3つのボタンを作成してください。