Angular에서의 반응성

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

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

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

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

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

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

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

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

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

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