Angular에서의 반응성

public 속성이 변경될 때마다, 템플릿은 반응적으로 응답합니다, 즉 즉시 변경됩니다. 이것이 반응성이 Angular에서 작동하는 방식입니다.

예제를 통해 살펴보겠습니다. 텍스트를 포함하는 속성이 있다고 가정해 봅시다:

export class AppComponent {
	public text: string = '';
}

이 속성을 어떤 태그 안에 출력해 봅시다:

<div>
	{{ text }}
</div>

이제 클릭하면 클래스 메서드를 호출하는 버튼을 만들어 보겠습니다:

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

이 메서드 안에서 텍스트를 변경해 보겠습니다:

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

이제 코드를 실행하고 버튼을 누르면, 클릭 직후에 div 안의 텍스트가 변경될 것입니다.

div와 두 개의 버튼을 만드세요. 첫 번째 버튼을 클릭하면 div에 하나의 텍스트가 나타나고, 두 번째 버튼을 클릭하면 다른 텍스트가 나타나도록 하세요.