Angular 指定エリアの表示/非表示をコントロールする

入力フォームなどを作成している際に、ユーザが選択した条件に応じて表示・非表示をコントロールしたい場合があると思います。
今回は、条件に応じてエリアの表示を切り替える方法を記述していきます。

条件指定

*ngIfを指定することで、エリアの表示を切り替えることができます。

かなりざっくりとした例ですが
チェックボックスにチェックを付けると、*ngIf="isShowArea"が発動します。

// checkbox.component.html

// checkboxを設置
<input type="checkbox" [checked]="isChecked" (click)=isShowArea(isChecked)>

// 表示・非表示エリア
<div class="sub-title" *ngIf="isShowArea">
  <h1>チェックが付いたら入力欄を表示！</h1>
  <input matInput type="text">
</div>

// checkbox.component.ts
public isShowParentArea: boolean = false;

isShowArea(checked: boolean) {
  // チェックされたらtrueで表示。チェックが外れたらfalseで非表示。
  this.isShowParentArea = checked;
}

参考