Angular에서의 조건부 반응성

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

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

<div>
	text
</div>

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

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

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

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

블록을 토글하는 버튼을 만드세요: 블록이 숨겨져 있으면 표시하고, 표시되어 있으면 숨기도록 합니다.