Реактивность в Angular

При любых изменениях публичных свойств, темплейт будет реагировать реактивно, то есть мгновенно изменяться. Так работает реактивность в 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';
  }
}

Теперь, если запустить код и нажать на кнопку, то сразу после нажатия поменяется текст в диве.