Angularにおける条件のリアクティビティ

リアクティビティは、条件 ngIfでも動作します。これは、クラスのプロパティに含まれる内容に応じてブロックを表示または非表示にできることを意味します。

実際に試してみましょう。以下のブロックがあるとします。

<div>
	text
</div>

条件に基づいて表示または非表示にしましょう:

<div *ngIf="isShow">
	text
</div>

次に、2つのボタンを作成します。 1つ目のボタンをクリックするとブロックを表示し、 2つ目のボタンをクリックすると非表示にします:

<button (click)="show()">
	show
</button>
<button (click)="hide()">
	hide
</button>

コンポーネントクラスに、ブロックが表示されているかどうかを制御するプロパティを追加しましょう:

export class AppComponent {
	public isShow: boolean = true;
}

では、ブロックを表示および非表示にするメソッドの実装を記述しましょう:

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

ブロックをトグルするボタンを作成してください: 非表示の場合は表示し、表示されている場合は非表示にします。