Рэактыўнасць у 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';
  }
}

Цяпер, калі запусціць код і націснуць на кнопку, то адразу пасля націску зменіцца тэкст у дыве.