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

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

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

app/app.component.html<div>
  text
</div>

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

app/app.component.html<div *ngIf="isShow">
  text
</div>

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

app/app.component.html<button (click)="show()">
  show
</button>
<button (click)="hide()">
  hide
</button>

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
}

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}