Angular에서의 조건부 반응성

반응성은 조건문 ngIf에서도 작동합니다. 이는 클래스의 속성에 무엇이 포함되어 있는지에 따라 블록을 표시하거나 숨길 수 있다는 의미입니다.

실제로 시도해 봅시다. 다음과 같은 블록이 있다고 가정해 보겠습니다.

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

조건에 따라 표시하거나 숨기도록 해 보겠습니다.

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

이제 두 개의 버튼을 만들어 보겠습니다. 첫 번째 버튼을 클릭하면 블록을 표시하고, 두 번째 버튼을 클릭하면 숨기도록 하겠습니다.

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;
  }
}