Реактивност в 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';
  }
}

Сега, ако стартираме кода и натиснем бутона, веднага след натискането текстът в div тага ще се промени.